Understandng власності CSS кліп
Чому я хочу, щоб це розуміти?? Хамм ...!!
Більшість письменників 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 кліп












































