CSS форми, кліпи і маски — як ними користуватися

3 хв. читання

Реліз 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 фігуру.

Маскування видозмінює елемент, який маскує. Наприклад, наступний приклад використовує колову маску разом з лінійним градієнтом:

circular mask

Пам'ятайте, що також можна використовувати bitmap зображення, навіть якщо в них відсутній альфа-канал (наприклад, прозорість), застосувавши mask-mode:

bitmap image

Ідея маскування полягає у тому, що воно модифікує пікселі зображення, змінюючи їх значення до такої міри, що вони стають повністю прозорими.

З іншого боку, кліпи «обрізають» елемент, а разом з тим і його «collision» поверхню. Наступне демо використовує обидва способи з однаковою формою хреста. Спробуйте навести на зображення і побачити різницю. Зображення, яке використовує маску реагує на наведення замаскованих частин, тобто його «collision» поверхня не змінилася. Елемент з використанням clip-path реагує на наведення курсором лише на видимій частині (у даному випадку хрест).

CSS форми, кліпи і маски — як ними користуватися
Masking vs clipping

Тож, чи є маскування кращим за використання кліпів, або все навпаки? Про це не можна судити, бо вони просто використовуються для різних цілей.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація