Реліз Firefox 54 приніс з собою нові фічі в CSS властивість: clip-path. Ця властивість дозволяє робити кліпи (тобто вирізати частини елементу), що в Firefox, до недавніх пір, було можливим лише за допомогою SVG. Втім, відтепер для цього можна буде використовувати CSS фігури: вкладки, кола, еліпси та многокутники!
Замітка: у цій статті багато демо, для відображення яких потрібна підтримка clip-path і mask. Для відображення та взаємодії з усіма демо, вам знадобиться Firefox 54 або вище.
Застосування
Важливо врахувати те, що clip-path приймає «зображення» не в якості вхідних даних, а як <clipPath> елементи:
Крута річ полягає у тому, що ці <clipPath> елементи можуть вміщувати у собі SVG анімації:
Втім, з виходом Firefox 54 у нашому розпорядженні з'являться функції CSS фігур. Вони дозволяють нам визначати форми у самому стильовому файлі, а тому нам більше не потрібні SVG. Ми можемо використовувати наступні функції: circle, elipse, inset та polygon. Ось вони у дії:
Крім цього, ми можемо створювати з ними анімацію у самому CSS, однак є пара обмежень: ми не можемо «змішувати» різні функції фігур (наприклад, робити перехід від circle до inset), а також многокутники мають зберігати початкову кількість вершин, коли ми їх анімуємо.
Ось приклад анімації, використовуючи circle:
А ось приклад з використанням polygon:
Замітка: не дивлячись на те, що не можна змінювати кількість вершин в анімації, ми можемо «об'єднати» їх, прописавши однакові значення. Це створює ілюзію, ніби кількість вершин змінюється.
Варто зауважити, що clip-path відкриває нові можливості в плані розміщення елементів. Наступне демо використовує кліпи, аби оформити зображення в двоколонковій статті трохи цікавіше:
Додамо трохи JavaScript
У наступному прикладі ми використаємо clip-path для того, щоб ізолювати певні елементи, у такий спосіб, симулюючи навчальний тур по сайту:
Це зроблено за допомогою JavaScript, що стягує данні про положення елементу, вираховує дистанцію відносно контейнеру, після чого використовує її для оновлення форми inset, використаної у властивості clip-path.
Крім того, ми тепер можемо динамічно змінювати кліпи залежно від даних користувача. Наступний приклад демонструє ефект «перископу», який контролюється мишкою:
clip-path чи mask
Існує схожа CSS властивість, mask, але вона не ідентична clip-path. Використовувати ту чи іншу властивість потрібно залежно від конкретного випадку. Втім, зауважте, що на даний момент цю властивість повністю підтримує лише Firefox, тому вам знадобиться Firefox 54, аби взаємодіяти з демо, показаними нижче.
Маскування можна здійснювати за допомогою зображення чи елементу <mask> у SVG. З іншого боку, clip-path використовує SVG path або CSS фігуру.
Маскування видозмінює елемент, який маскує. Наприклад, наступний приклад використовує колову маску разом з лінійним градієнтом:
Пам'ятайте, що також можна використовувати bitmap зображення, навіть якщо в них відсутній альфа-канал (наприклад, прозорість), застосувавши mask-mode:
Ідея маскування полягає у тому, що воно модифікує пікселі зображення, змінюючи їх значення до такої міри, що вони стають повністю прозорими.
З іншого боку, кліпи «обрізають» елемент, а разом з тим і його «collision» поверхню. Наступне демо використовує обидва способи з однаковою формою хреста. Спробуйте навести на зображення і побачити різницю. Зображення, яке використовує маску реагує на наведення замаскованих частин, тобто його «collision» поверхня не змінилася. Елемент з використанням clip-path реагує на наведення курсором лише на видимій частині (у даному випадку хрест).
Тож, чи є маскування кращим за використання кліпів, або все навпаки? Про це не можна судити, бо вони просто використовуються для різних цілей.
Ще немає коментарів