Створюємо приголомшливі ефекти для зображень за допомогою властивості backdrop-filter

31

Від автора: сьогодні ми поговоримо про CSS властивість backdrop-filter, яке було представлено в специфікації Filter Effects Module Level 2. Зокрема, ми розберемо синтаксис властивості, підтримку в браузерах і практичне застосування.

Властивість backdrop-filter — це не просто фільтри

Швидше за все, ви вже чули про CSS фільтри. Якщо все ж вам потрібно нагадати, що можете прочитати чудову статтю «CSS фільтри: розмиття, відтінки сірого, яскравість і т. д. в CSS!».

Властивість filter дозволяє застосовувати на елементи такі ефекти як розмиття і сепію, а з допомогою властивості backdrop-filter ми зможемо застосовувати ті ж самі ефекти, але вже до тла за елементом. У демо нижче показана різниця (ви повинні сидіти через браузер з підтримкою, наприклад, через Chrome з активованим прапором Experimental Web Platform Features – більш докладно про підтримку в браузерах див. в наступній секції):

У першому випадку фільтр застосовується до всього зображення, а в другому – лише до тієї частини, що розташована позаду тексту. Потрібно також прояснити, що ефект не застосовується до тла самого зображення, він застосовується до того, що знаходиться під ним. Крім того, фон самого зображення повинен бути злегка прозорим, щоб користувач побачив бажаний візуальний ефект.

Синтаксис і підтримка в браузерах

Частина функцій, з якими ви ймовірно вже знайомі, властивість backdrop-filter перейняло у властивості filter. Дані значення можна застосувати до будь-якого елементу з допомогою наступного синтаксису:

backdrop-filter: []* | none

Як і з властивістю filter, тут можна застосовувати кілька фільтрів до фону елемента. Всі значення, що підходять для filter, також підходять і для властивості backdrop-filter. Властивість піддається анімації.

Незважаючи на всі подібності, у властивості backdrop-filter не така широка підтримка, як у filter. Прямо зараз без прапора дане властивість підтримує тільки Safari 9, і навіть в цьому браузері доведеться використовувати префікс –webkit-.

В браузерах Chrome і Opera можна активувати прапор «Experimental Web Platform Features» за адресою «chrome://flags». У Firefox і Edge дане властивість не підтримується зовсім. Більш детально вивчити підтримку в браузерах для властивості backdrop-filter можна на сайті Can I use.

Як використовувати властивість backdrop-filter

Для правильної роботи властивість backdrop-filter вимагає мінімум два елементи: цільовий елемент і другий елемент, розташований під цільовим, до якого буде застосовуватися ефект. У демо вище фоновий ефект створюється за допомогою наступної розмітки:

Heading A

Some random text related to the heading.

Також ми використовували стилі нижче, щоб застосувати фільтр до тла нашого елемента, а також щоб встановити фон тексту:

.backdrop {
background: url(‘path/to/image.jpg’);
}
.content {
position: relative;
top: 30%;
background: rgba(100,150,100,0.35);
backdrop-filter: hue-rotate(180deg);
}

Ще один цікавий спосіб застосування цієї властивості полягає в тому, щоб застосовувати різні фільтри до різних частин зображення. Я кажу не про одночасному застосуванні декількох фільтрів, що теж можливо. Я маю на увазі, що можна застосувати фільтр grayscale до лівої частини зображення, а sepia – до правої. Або ж можна розбити зображення на кілька частин і застосувати фільтр hue-rotate до всіх частин з різним значенням. Один із способів зробити так полягає в тому, що цільовим елементів необхідно виставити прозорість в нуль, щоб вони не впливали на зображення під ними, до якого застосовуються фільтри.

Создаем потрясающие эффекты для изображений при помощи свойства backdrop-filter

Розмітка:

….

І CSS:

.target {
position: absolute;
top: 0%;
height: 100%;
width: 20%;
opacity: 0;
}
.a {
left: 0%;
backdrop-filter: hue-rotate(30deg);
}
.b {
left: 20%;
backdrop-filter: hue-rotate(90deg);
}
/* Фільтри інших секцій зображення */

В моєму випадку результат такий:

Краса кінцевого зображення залежить від самого зображення і вибраних вами фільтрів. Однак якщо правильно використовувати цю властивість, можна створити по-справжньому приголомшливі ефекти. Щоб зрозуміти, чого можна досягти, ви повинні самі поекспериментувати з різними фільтрами.

Крім того, можна анімувати різні властивості наших цільових елементів. Приміром, в демо нижче у верхній частині зображення розташовані два div а, до кожного з яких застосовані різні фільтри.

Создаем потрясающие эффекты для изображений при помощи свойства backdrop-filter

При наведенні курсору миші на зображення ширина першого div а і висота другого div а змінюються від 0% до 80% за 0.5 секунди. Зображення ділиться на 4 секції, до кожної з яких застосована своя комбінація фільтрів:

Серед інших способів застосування – SVG фільтри, а також анімація фільтрів, застосованих до цільових елементів.

Практичне застосування

Створювати всі ці красиві ефекти за допомогою властивості backdrop-filter, звичайно, добре, але у цієї властивості багато способів практичного застосування. Перше, що прийшло мені в голову, коли я дізнався про цю властивість – як його використовувати для розмиття зображення і попереджати користувачів перед показом якого-небудь графічного контенту.

Создаем потрясающие эффекты для изображений при помощи свойства backdrop-filter

Для початку нам знадобиться наступна розмітка:

Створюємо приголомшливі ефекти для зображень за допомогою властивості backdrop-filter

Click on the button below to see the image from the murder scene.

Show Me

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

CSS код для створення ефекту розмиття зображення:

.warning {
background: rgba(0,0,0,0.75);
backdrop-filter:contrast(4) blur(20px);
}

Можете погратися з різними фоновими кольорами і фільтрами і підібрати те, що вам підходить. У демо нижче я також додав трохи JS, щоб ховати текст з попередженням по кліку на кнопку «Show Me». Спробуйте:

За допомогою властивості backdrop-filter також можна розмивати фон при показі модальних вікон користувачам, а також для розмиття фону за висувається меню при його відкритті. Ще один спосіб застосування властивості backdrop-filter – розмивати зображення на сайті до їх повного завантаження, як це робиться на сайті Medium.

Висновок

За допомогою властивості backdrop-filter ви зможете відтворювати безліч ефектів, для яких раніше потрібен був JS. Однак я б порадив почекати нормальної підтримки в браузерах перед використанням властивості продуктиве. Крім усього іншого, потрібно пам’ятати ще про продуктивності. Якщо використовувати властивість на великій кількості елементів або на великих областях сторінки, продуктивність сильно падає.

Більш детально вивчити властивість backdrop-filter можна в чернетці W3C і в документації MDN. А ви знаєте якісь цікаві способи застосування даного властивості? Чи думаєте використовувати його в майбутньому? Пишіть про це в коментарях.