Пошук уроків, статей та іншого контенту
Створите ефект матового скла та розмиття фону позаду елемента за допомогою backdrop-filter.
backdrop-filterВластивість backdrop-filter застосовує графічний ефект не до самого елемента, а до вмісту, який знаходиться позаду нього.
Це дає змогу створювати:
ефект матового скла;
розмиті панелі поверх зображення;
напівпрозорі картки;
затемнення або підвищення контрастності фону за елементом.
Найчастіше backdrop-filter використовують разом із напівпрозорим фоном:
.glass {
background: rgb(255 255 255 / 0.2);
backdrop-filter: blur(16px);
}Напівпрозорий фон важливий: якщо фон елемента повністю непрозорий, ефект позаду нього не буде помітним.
filter і backdrop-filterЦі властивості мають різний напрямок дії:
filter обробляє сам елемент і його вміст;
backdrop-filter обробляє область позаду елемента.
/* Розмиває сам елемент */
.element {
filter: blur(10px);
}
/* Розмиває фон, який видно крізь елемент */
.element {
backdrop-filter: blur(10px);
}Якщо застосувати filter: blur() до картки, розмитими стануть текст, рамка та інші дочірні елементи. За допомогою backdrop-filter текст картки залишається чітким, а розмивається лише фон за нею.
.element {
backdrop-filter: <функція-фільтра>;
}Найпоширеніша функція — blur():
.glass-panel {
backdrop-filter: blur(20px);
}Значення в blur() визначає радіус розмиття. Що більше значення, то сильніше розмиття:
.blur-small {
backdrop-filter: blur(4px);
}
.blur-large {
backdrop-filter: blur(24px);
}Для ефекту матового скла зазвичай поєднують розмиття з іншими функціями:
.glass-panel {
backdrop-filter: blur(18px) saturate(140%) brightness(110%);
}Доступні, зокрема, такі функції:
blur() — розмиття;
brightness() — зміна яскравості;
contrast() — зміна контрастності;
grayscale() — перетворення на відтінки сірого;
saturate() — зміна насиченості;
sepia() — ефект сепії;
opacity() — зміна прозорості фону.
Розглянемо повний приклад. На фоні розміщене зображення, а поверх нього — напівпрозора картка. Зображення за карткою розмивається, але вміст картки залишається чітким.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Матовe скло</title>
<style>
:root {
color-scheme: dark;
font-family: Arial, sans-serif;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
padding: 24px;
color: #ffffff;
background:
linear-gradient(135deg, rgb(21 31 77 / 0.8), rgb(101 31 87 / 0.75)),
url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1800&q=80")
center / cover fixed;
}
.glass-card {
width: min(100%, 440px);
padding: 32px;
border: 1px solid rgb(255 255 255 / 0.35);
border-radius: 24px;
background: rgb(255 255 255 / 0.16);
box-shadow:
0 24px 60px rgb(0 0 0 / 0.3),
inset 0 1px 0 rgb(255 255 255 / 0.2);
/* Розмиваємо та насичуємо фон позаду картки */
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
.glass-card__label {
margin: 0 0 12px;
color: rgb(255 255 255 / 0.7);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.glass-card h1 {
margin: 0 0 16px;
font-size: clamp(2rem, 7vw, 3.5rem);
line-height: 1;
}
.glass-card p {
margin: 0;
color: rgb(255 255 255 / 0.82);
line-height: 1.6;
}
</style>
</head>
<body>
<article class="glass-card">
<p class="glass-card__label">Backdrop filter</p>
<h1>Матовe скло</h1>
<p>
Напівпрозорий фон картки пропускає кольори зображення,
а backdrop-filter розмиває їх позаду елемента.
</p>
</article>
</body>
</html>У цьому прикладі:
body має фонове зображення та градієнт.
.glass-card отримує напівпрозорий білий фон.
backdrop-filter розмиває область фонового зображення за карткою.
border і box-shadow підсилюють візуальний ефект скла.
-webkit-backdrop-filter додає сумісність із браузерами, де потрібен префікс.
Для backdrop-filter важливі альфа-канал і прозорість. Такі варіанти дають змогу побачити ефект:
/* Функція rgb із прозорістю */
.panel {
background: rgb(255 255 255 / 0.2);
backdrop-filter: blur(14px);
}
/* Відсоткова прозорість */
.panel {
background: rgb(255 255 255 / 20%);
backdrop-filter: blur(14px);
}
/* Ключове слово transparent */
.panel {
background: transparent;
backdrop-filter: blur(14px);
}А цей варіант повністю закриває фон:
.panel {
background: #ffffff;
backdrop-filter: blur(14px);
}Технічно фільтр може бути застосований, але користувач не побачить розмиття, оскільки непрозорий фон приховує результат.
Фільтри записують через пробіл. Вони застосовуються послідовно зліва направо:
.glass-panel {
backdrop-filter:
blur(16px)
brightness(115%)
contrast(105%)
saturate(150%);
}Послідовність може впливати на результат. Наприклад, збільшення насиченості після розмиття дає інший ефект, ніж насичення перед розмиттям.
Для більшості панелей достатньо короткої комбінації:
.glass-panel {
backdrop-filter: blur(12px) saturate(130%);
}Надмірна кількість фільтрів може зробити текст і фон менш читабельними, тому ефект варто перевіряти на різних зображеннях і кольорах.
Фільтр діє в межах області самого елемента, включно з його внутрішніми відступами. Якщо елемент має заокруглені кути, фон зазвичай також обрізається за цим контуром:
.glass-panel {
overflow: hidden;
border-radius: 20px;
background: rgb(255 255 255 / 0.18);
backdrop-filter: blur(20px);
}overflow: hidden особливо корисний, коли всередині панелі є дочірні декоративні елементи, які не повинні виходити за межі заокругленої форми.
Для самої панелі часто достатньо такого набору:
.glass-panel {
border: 1px solid rgb(255 255 255 / 0.25);
border-radius: 20px;
background-color: rgb(255 255 255 / 0.14);
backdrop-filter: blur(16px);
}Якщо браузер не підтримує backdrop-filter, напівпрозорий фон все одно залишиться видимим. Користувач побачить звичайну напівпрозору панель без розмиття.
За потреби можна додати запасний стиль через @supports:
.glass-panel {
border: 1px solid rgb(255 255 255 / 0.25);
background: rgb(32 32 48 / 0.85);
}
@supports (backdrop-filter: blur(16px)) {
.glass-panel {
background: rgb(255 255 255 / 0.16);
backdrop-filter: blur(16px) saturate(140%);
}
}Спочатку задається читабельний непрозорий або майже непрозорий фон. Якщо підтримка властивості є, фон змінюється на напівпрозорий і вмикається ефект скла.
Матовий ефект не повинен погіршувати читання тексту. На результат впливають:
контраст тексту та фону;
рівень прозорості;
яскравість зображення позаду;
сила розмиття;
наявність межі або тіні навколо панелі.
Якщо фон змінюється або містить багато деталей, варто додати додатковий шар затемнення:
.glass-panel {
background:
linear-gradient(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.18)),
rgb(255 255 255 / 0.16);
backdrop-filter: blur(18px);
}Тут градієнт накладається на напівпрозорий фон і робить вміст панелі стабільнішим за контрастом.
Для користувачів, які зменшують візуальні ефекти в операційній системі, можна вимкнути розмиття:
@media (prefers-reduced-transparency: reduce) {
.glass-panel {
background: rgb(24 24 32 / 0.94);
backdrop-filter: none;
}
}У такому режимі панель стає майже непрозорою, тому її вміст не залежить від фону позаду.
Розмиття великих областей може бути обчислювально дорогим, особливо на мобільних пристроях. Щоб зменшити навантаження:
не використовуйте надмірно великий радіус blur();
не застосовуйте ефект до великої кількості елементів одночасно;
розмивайте конкретні панелі, а не весь інтерфейс;
перевіряйте сторінку на слабших пристроях.
Наприклад, для картки зазвичай достатньо:
.card {
backdrop-filter: blur(12px);
}Значення blur(60px) не завжди виглядає краще, але майже завжди потребує більше ресурсів.
.panel {
background: white;
backdrop-filter: blur(20px);
}Ефект не буде видно, оскільки білий фон повністю закриває вміст позаду.
Використовуйте прозорість:
.panel {
background: rgb(255 255 255 / 0.2);
backdrop-filter: blur(20px);
}filter замість backdrop-filter.panel {
filter: blur(20px);
}Це розмиває саму панель, зокрема її текст і дочірні елементи. Для розмиття фону позаду потрібен саме backdrop-filter.
Якщо позаду елемента однотонний фон або немає видимого зображення, розмиття може бути непомітним. Перевіряйте ефект на фоні з деталями, кольоровими плямами або градієнтами.
Напівпрозора панель без межі може зливатися з фоном. Легка напівпрозора рамка допомагає визначити її контури:
.panel {
border: 1px solid rgb(255 255 255 / 0.25);
}Великий радіус не гарантує кращий результат:
.panel {
backdrop-filter: blur(80px);
}Починайте з blur(8px)–blur(20px) і збільшуйте значення лише за потреби.
backdrop-filter обробляє фон позаду елемента.
Для помітного ефекту елемент повинен мати прозорий або напівпрозорий фон.
blur() створює розмиття, а saturate(), brightness() і contrast() допомагають налаштувати вигляд.
filter розмиває сам елемент, а backdrop-filter — те, що знаходиться за ним.
border, border-radius і box-shadow допомагають створити переконливий ефект матового скла.
Потрібно подбати про читабельність тексту, запасний стиль і продуктивність.