Як застосовувати CSS-інструменти відсікання і маскування

19

Від автора: Технологія CSS постійно вдосконалюється, і в ній з’являються нові інструменти. У цій статті я розповім про одну нової можливості: відсіканні (clipping) за допомогою властивості clip-path і маскування (masking).

clip-path і masking – це дві властивості, трохи розширюючи межі нашого поточного уявлення про блочної моделі (box model).

Браузерна підтримка

На щастя, є досить хороша браузерна підтримка для властивості clip-path. Ця властивість підтримується всіма десктопними версіями браузерів аж до IE9 (хоча, як ми побачимо далі, деякі старі версії браузерів вимагають додавання вендорних префіксів). Єдиною справжньою проблемою в цьому плані є мобільна версія IE (IE Mobile).

Однак ситуація сильно відрізняється відносно інструмента маскування. Зараз його підтримують тільки браузери Chrome і Safari, і для них необхідно використовувати вендорний префікс (-webkit-).

Відсікання з допомогою SVG

В CSS 2 вже була властивість clip, але дана властивість дозволяє нам виробляти відсікання лише прямокутних форм. Важлива новина полягає в тому, що за допомогою властивості clip-path ми тепер можемо відсікати зображення, використовуючи багатокутники в SVG.

Припустимо, що у нас є наступний шматочок коду SVG:

Ви можете просто створити довільну фігуру, використовуючи сервіс CSS Path Generator, який або згенерує SVG-код для його подальшої вставки на сторінку, або ви навіть можете завантажити SVG-файл, якщо захочете скористатися ним.

Як бачите, SVG-код, що містить звичайний ID, який знадобиться нам для подальшого звернення до елементу в CSS. Щоб відсікти просте зображення, використовуючи для цього SVG, нам потрібно використовувати властивість clip-path, а потім викликати функцію url():

img {
clip-path: url(#clipPolygon);
}

В даному випадку SVG-файл містить лише один багатокутник, тому ми можемо скористатися скороченою формою запису, тобто функцією polygon() і просто вставити туди наявні у нас координати SVG-файл:

img {
clip-path: polygon(99px 143px,300px 293px,522px 143px,302px -5px,300px -7px);
}

Обидва прикладу працюють абсолютно однаково. Єдина відмінність полягає в тому, що другий підхід не вимагає використання HTML-розмітки. Разом з функцією polygon можна також використовувати переходи (transitions):

.clip{
-webkit-clip-path: polygon(195px 147px,295px 297px,395px 147px,295px -3px);
transition: 1s all ease;
}
.clip:hover{
-webkit-clip-path: polygon(82px 148px,295px 297px,496px 147px,295px -3px);
}

Подивитися, як це працює, ви можете у створеному мною прикладі

Маскування

Цей інструмент має більше експериментальний характер, і, отже, його трохи складніше тестувати. Але, ймовірно, він стане доступним для всіх браузерів, як тільки люди почнуть користуватися ним в Chrome та Safari.

Маскування працює точно так само, як і в програмі Photoshop: зображення або градієнт використовуються в якості фільтра для деяких частин вашого зображення. Для цього ми будемо використовувати властивість mask-image і посилання на SVG-файл, наприклад, так:

img {
-webkit-mask-image: url(«mask.svg»);
}

Така запис повідомить браузеру про те, що потрібно знайти вказаний SVG-файл і використовувати його в якості маски для зображення. Якщо хочете, можете використовувати ID SVG-елемента:

img {
-webkit-mask: url(#masking);
}