Коли я вперше побачив ефект розмиття тла на сторінці, коли відкриваєш якесь модальне вікно, моєму захвату й здивуванню не було меж. Здавалося, ми вступали до нової ери користувацьких інтерфейсів — футуристичних, майже фізичних, осяжних.
Але тоді я навіть не здогадувався, яких зусиль коштував це ефект розробникам. В кращому випадку — svg-фільтр, у гіршому — скриншот тла через canvas та розмиття вручну. Мені здається, я маю дякувати богам веброзробки, що свого часу мене оминула доля додавати розмиття на сторінку.
Проте час не стоїть на місці і, як багато інших поширених проблем, цю задачу тепер можна виршіти одним рядком CSS. Багато хто з вас уже знайомий з властивістю
backdrop-filter, головною відмінністю якої від просто filter є те, що розмиття вмісту відбувається не всередині елементу, а поза ним.Якщо не поставили вподобайку — далі читати не дозволяю.
Ця властивість відразу спростила код навколо наших модальних вікон (а
dialog спрощує ще більше, але про це — іншим разом). Однак, як часто трапляється, далі цього конкретного використання справа не заходить.А дарма. У
backdrop-filter є й інші можливості, наприклад, зміна яскравості чи контрасту, обернення кольорів, маніпуляції з насиченістю та навіть поворот відтінку на колірному колі.… {
backdrop-filter: blur(10px);
backdrop-filter: brightness(150%);
backdrop-filter: contrast(150%);
backdrop-filter: grayscale(150%);
backdrop-filter: invert(150%);
backdrop-filter: opacity(0.6);
backdrop-filter: saturate(200%);
backdrop-filter: sepia(150%);
backdrop-filter: hue-rotate(50deg);
}Ба більше, синтаксис дозволяє компонувати різні фільтри, тож можна отримувати дійсно неймовірні та неочікувані результати:
backdrop-filter:
contrast(150%)
grayscale(150%)
invert(150%);
Варто памʼятати, що аби ефект запрацював, елемент, у якого є
backdrop-filter, не повинен мати суцільного тла. Якщо важливо явно відділити його від елементів поза ним, і при цьому застосувати якийсь цікавий фільтр, дещиця прозорості фону не завадить. А найкраще ефект від фільтрів видно саме при повністю прозорому тлі.А ще надзвичайно важливо мати на увазі те, що
backdrop-filter обчислюється в реальному часі на GPU, і може потребувати значний обʼєм ресурсів. Зокрема, якщо фільтр накладено на велику площу (так, той самий бекдроп під модалкою). Ситуація може поігршитись, якщо на тлі відбувається анімація, тоді бравзер змушений постійно оновлювати зображення позаду елемента, щоб відповідати цій анімації. Ну й трошки навантаження може додати тінь на цьому ж елементі — чим вона більша, тим більше ресурсів жує бравзер.Це не означає, що ваш ноутбук згорить, щойно ви відобразите анімацію з фільтром (радше клієнтський), але зважати на це теж варто. Не у всіх же МакБуки з М4.
MDN: backdrop-filter
Маленьке демо: https://jsfiddle.net/b0Lry2jm/3
***
@babichdev