Магія CSS

“Все, що вам потрібно знати про переходи до CSS”

переходів

Перед прочитанням цієї глави, будь ласка, прочитайте All you need to know about CSS Transitions від Алекса МакКоя. Це фантастичний ресурс, що відповідає більшу частину питань.

Переходи в CSS є ідеальним рішенням, якщо вам потрібно перевести елемент від одного значення властивості до іншого простим шляхом.

Тепер давайте об'єднаємо це знання з тим, що ми дізналися в попередніх розділах про Колір та Друкарню.

Приклад 1: Знебарвлення літер окремо

Одним із найпотужніших інструментів є властивість transition-delay. Воно відповідає за затримку перед початком переходу. У цьому прикладі ми поставимо начебто випадкові затримки для кожної літери, створюючи ефект прояву. Дуже витончено та привабливо.

Приклад 2: Кілька переходів та затримок

CSS переходи по-справжньому розкривають свій потенціал, якщо їх групувати. У цьому прикладі ми вкажемо два переходи, один для перетворення (transform) і другий для прозорості (opacity). Обидва вказуються через кому як значення однієї властивості transition.

Оскільки ми вказали два переходи, то маємо вказати і дві затримки. Вони пишуться так само, через кому.

Зрештою комплект затримок та переходів дозволяє створити гарний ефект хвилі для літер.

І якщо вам цікаво, переходи працюють і для 3D-перетворень.

Звичайно, це тільки верхівка айсберга. Кольори, градієнти, розміри, позиціонування, орієнтація і т.д.-до всього цього списку застосовується властивість transition. Крім того існують властивості затримки та уповільнення. Переходи CSS дуже прості у використанні. Повірте, браузер буде робити те, що ви хочете. Transitionдобре підтримується.

Магія! Акордеон на радіокнопках

Комбінація станів HTML і переходів у CSS відкриває широкі можливості для інтерактиву. Тут ми використовуємо псевдо-клас :checked для радіокнопок щоб стилізувати елементи, що йдуть за ними. Цей метод часто називають The Checkbox Hack, але він працює з будь-якими елементами, для яких застосовні псевдо-класи :checked, :focus.

У цьому прикладі багато тонкощів, але основна ідея: кожна секція акордеону має label, пов'язаний з радіокнопкою за допомогою + для завдання стилів розкритого стану секцій.

Після натискання на label кнопка перетворюється на стан :checked (і навпаки при повторному натисканні), спрацьовує механізм відкриття/закриття відповідної секції.

І вуаля! Акордеон на чистому HTML та CSS.

Натхнення

Якщо ви шукаєте приклади, що надихають те, що можна зробити за допомогою transition — подивіться ці неймовірні демо:

    S >Для тих, хто любить приправити свій CSS щіпкою JS існує jquery.transit від rstacruz. Для простих статичних переходів (оксюморон?) вона надмірна. Але ви можете знайти їй застосування у випадках, коли створюєте динамічні переходи або переходи з змінними користувачами.

Позакласне читання

магія

Переклад глави зі збірки The magic of CSS Adam Schwartz Настійно раджу звернеться до першоджерела. Він прекрасний!