Висловлюючи IT

Чому я хочу, щоб це розуміти?? Хамм ...!!

Більшість письменників CSS погодяться, що CSS кліп власності, ймовірно, одним з найбільш невикористаних властивостей CSS. Це було так вірно і для мене і був найщасливіший нехтувати цим, поки я не почав зміни MooTools ДВА ручку (Pin) Slider Компонент (з Range Indicator) .

Існував хороша пропозиція від одного з компонентів користувачам змінювати Slider Компонент використанням обрізаний Довідковий зображення (у порівнянні зі змінною шириною поділ), щоб вказати повзунка діапазону. Таким чином, настав мій час, щоб увійти в задоволення, але не-статутних (для мене звичайно ж) води майна кліп CSS.

Ну! як важко це може бути? Не так багато на всіх ... ТАК і НІ. Синтаксис CSS власності Кліп досить прямій, але зміст / usuage трохи croocked. З пам'яттю, як у мене, кожен раз, коли я сиджу в переробку на мій Slider сценарій ... У мене є tokeep повертаючись до використання цього кліпу власності, щоб нагадати собі логіку, яку я створив в мій сценарій .... Звідси! думав пера його, в надії згадати його майбутнє (а також в інтересах тих, хто, здається Вражає власності кліпу CSS)

Що таке CSS кліп робити?

Кліп є частиною візуального модуля ефектів CSS 2.1. Простіше кажучи, його робота полягає в розміщенні видиме вікно у верхній частині об'єкта, який обрізається, тому обрізання зображень і створення мініатюр без створення додаткових файлів (я вже поставив цю можливість для більш ефективного використання в компоненті Slider )

Використовуючи властивість кліпу CSS, ви можете створити вирізку допомогою форми прямокутника. Як і багато інших властивостей CSS (наприклад, маржа, відступи і т.д.), використовуючи прямокутник, необхідно чотири координати Top, Right, Bottom, Left (TRBL). Croocked природа цієї властивості відображає, коли ви уважно подивитеся, як кліп обчислює область відсікання, використовуючи ці чотири координати (посилає мозок у жеребкуванні на деякий час). Тепер, щоб збити вас з пантелику нижньої починається зверху, а права починається з лівого боку. . Ви бачите, що я сказав? .... Таким чином, цей пост ...

Ця невелика плутанина може легко зникнути, з цим візуальним пояснення CSS Clip / прямокутник власності, як показано нижче!!

Вимоги CSS кліп

Завдання, яке ми почали це кліп на наступному зображенні Мініатюра на квадратний шукати зображення (а також ширококутні зображення)

Оригінальний Thumbnal / Image	Кліп Вимоги до Sqaure Thumbmail

Результати CSS кліп

Переглянути демо | Завантажити файли вихідного коду

Це повідомлення може бути хорошим прикладом для фрази «Викладання бабусі смоктати яйця" ... Тому що це тільки основні CSS Stuff. Але для тих, хто, подібно мені, забуваючи, що це може бути благом. Я завжди думав, (я можу втратити свою роботу за ці слова), можна було тільки, щоб зберегти деякі частини HTML-вміст сторінки STATIC (тобто, його позиція залишається як є на прокрутки вікна), використовуючи смарт-скрипти, роблячи всі ці наукові Розрахунки знайти динамічні позиції, захоплення window.scroll подій і настройка тайм-аути і т.д.

Ніколи не думав, що це може так просто, як це .... Тут, в CSS / HTML нижче, у мене є чотири стаціонарних блоків, один кріпиться до кожного extrimities на цій сторінці, зверху, справа, внизу і зліва ... зрозуміло ... Ви можете вибрати одну або декілька, якщо потрібно буде ...

CSS
. Статичний {Дисплей: блок; г-індекс: 10; колір: # FFFFFF; переповнення-х: прихований; переповнення-й: прихований; стан: ixed;
}
# {Зміст маржа: 100px 150px 160px 0px; кордону: 1px твердих # e6e6e6}

# Обгортка-т {верх: 0px; фон: # 33CC66, ширина: 100%, висота: 55 пікселів;}

# Обгортка-л {топ: 80px; фон: # FF9966; висота: 300px; ширина: 150px; кордону: 2px твердих # e6e6e6;}

# Обгортка-б {вниз: 0px; фон: # 3333CC, ширина: 100%, висота: 55 пікселів;}

# Обгортка-р {топ: 80px; фон: # 6666FF; висота: 300px; ширина: 140px; кордону: 2px твердих # e6e6e6, праворуч: 0;}

HTML
<div id="contents"> Ви основний зміст сторінки </ div>
<div id="wrap-b" class="static">
Статичний зміст на сторінку дно
</ Div>
<div id="wrap-t" class="static">
Статичний зміст на сторінки На початок
</ Div>

<div id="wrap-l" class="static">
Статичний зміст на сторінку залишили
</ Div>
<div id="wrap-r" class="static">
Статичний матеріал на стор право
</ Div>

Переглянути приклад тут wroking

Коли я прочитав цю статтю на A List Apart " Штучний Абсолютна позиціонування
Ерік Sol ", я був не менше, ніж вражений. Я був пригнічений majorly, тому, чесно кажучи, я задавався питанням, чому я не можу придумати щось казкове, як цей.

Зазвичай, коли ми створюємо CSS макети, ми використовуємо "ПОЛОЖЕННЯ" або "плаває", або дуже погана комбінація обох. Ерік Сол і його команди визначають поруч з ідеальною технікою нового типу CSS макета техніку, яку вони охрестили як "штучний Абсолютна позиціонування" після штучного техніка колони, яка імітує наявність стовпця.

Ви знаєте, що проблема всіх нас, CSS, розробники з розпадається макети (несподівані зміни змісту, які викликають цілі стовпці на плівку, коли ми використовуємо плаваючий макети) ... Ну! Схоже, історія!
Цей формат техніка ще дуже молода, і вона повинна корзини з усіх тих, гуру CSS там, перш ніж вона стане ООН письмового стандарту. Я щасливий, що використовувати його зараз! ... І я вже в середині перетворення моїх попередніх проблематично / плаваючою не-обов'язково макети в розташування FAP вже ... і радий сказати "ми вже використовуємо штучний Абсолютна позиціонування для цього блогу, а також" ... ВПЕРЕД спробувати, зараз!

Престижність Ерік!