Пошук уроків, статей та іншого контенту
Застосуєте розмиття, яскравість, контраст та інші візуальні ефекти до зображень і блоків.
CSS-фільтри змінюють візуальне відображення елемента без зміни його HTML-структури. Їх можна застосовувати до:
зображень;
фонових зображень;
блоків;
тексту та інших елементів;
SVG-елементів.
Для цього використовується властивість filter:
.image {
filter: grayscale(100%);
}Фільтр застосовується до всього елемента, включно з його вмістом. Якщо додати filter до блоку, ефект пошириться і на текст, і на фон, і на дочірні елементи.
blur()Розмиває елемент. Значення задається радіусом розмиття:
.image {
filter: blur(5px);
}Чим більше значення, тим сильніше розмиття. Зазвичай використовують px.
.light-blur {
filter: blur(2px);
}
.strong-blur {
filter: blur(12px);
}Розмиття може візуально виходити за межі елемента. Якщо елемент знаходиться всередині контейнера з overflow: hidden, зайва частина буде обрізана.
brightness()Змінює яскравість:
.image {
filter: brightness(130%);
}100% — початкова яскравість;
значення менше 100% — затемнення;
значення більше 100% — освітлення;
0% — повністю чорний результат.
Приклад:
.dark {
filter: brightness(60%);
}
.bright {
filter: brightness(140%);
}contrast()Змінює контрастність:
.image {
filter: contrast(150%);
}100% — початковий контраст;
менше 100% — нижчий контраст;
більше 100% — вищий контраст.
.low-contrast {
filter: contrast(70%);
}
.high-contrast {
filter: contrast(160%);
}grayscale()Перетворює кольоровий елемент на відтінки сірого:
.image {
filter: grayscale(100%);
}0% — без змін;
100% — повністю чорно-біле зображення;
проміжні значення створюють часткове знебарвлення.
.partially-gray {
filter: grayscale(50%);
}sepia()Додає ефект сепії — теплих коричнево-жовтих відтінків:
.image {
filter: sepia(80%);
}Значення 100% дає максимально виражений ефект.
saturate()Змінює насиченість кольорів:
.image {
filter: saturate(180%);
}100% — початкова насиченість;
0% — кольори повністю знебарвлені;
значення більше 100% — яскравіші та насиченіші кольори.
hue-rotate()Зсуває відтінок кольорів по колірному колу:
.image {
filter: hue-rotate(90deg);
}Значення задається в градусах:
.blue-shift {
filter: hue-rotate(180deg);
}Цей фільтр не змінює яскравість або насиченість, а саме замінює відтінки кольорів.
invert()Інвертує кольори:
.image {
filter: invert(100%);
}0% — без змін;
100% — повна інверсія;
проміжні значення — часткова інверсія.
opacity()Змінює прозорість елемента:
.image {
filter: opacity(50%);
}Однак для звичайної прозорості частіше використовують властивість opacity:
.image {
opacity: 0.5;
}Функція opacity() може бути корисною як частина послідовності фільтрів.
drop-shadow()Додає тінь відповідно до непрозорої форми елемента:
.logo {
filter: drop-shadow(4px 4px 8px rgb(0 0 0 / 40%));
}Синтаксис подібний до box-shadow:
filter: drop-shadow(зсув-по-x зсув-по-y радіус-розмиття колір);drop-shadow() особливо добре працює із зображеннями у форматі PNG або SVG із прозорим фоном. Тінь повторює контур видимої частини зображення, а не прямокутник усього елемента.
В одному значенні filter можна послідовно застосувати кілька функцій:
.image {
filter: brightness(110%) contrast(120%) saturate(130%);
}Функції записуються через пробіл, без ком і крапок з комою між ними.
Порядок функцій має значення:
.first {
filter: brightness(120%) contrast(80%);
}
.second {
filter: contrast(80%) brightness(120%);
}Ці два варіанти можуть дати різний результат, оскільки кожен наступний фільтр працює з результатом попереднього.
Поширений сценарій — зробити зображення чорно-білим, а під час наведення повернути кольори:
.gallery-image {
filter: grayscale(100%);
transition: filter 300ms ease;
}
.gallery-image:hover {
filter: grayscale(0%);
}Властивість transition робить зміну плавною. Без неї фільтр перемикатиметься миттєво.
Можна поєднувати кілька ефектів:
.card-image {
filter: grayscale(100%) brightness(80%);
transition: filter 300ms ease, transform 300ms ease;
}
.card-image:hover {
filter: grayscale(0%) brightness(105%);
transform: scale(1.03);
}Нижче наведено повний приклад, який можна зберегти у файл index.html і відкрити в браузері. Зображення завантажуються з віддаленого джерела, тому для їх відображення потрібне підключення до інтернету.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS-фільтри</title>
<style>
:root {
font-family: Arial, sans-serif;
color: #172033;
background: #eef2f7;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 32px;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.card {
overflow: hidden;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 10px 24px rgb(30 45 70 / 15%);
}
.card__image {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: filter 300ms ease, transform 300ms ease;
}
.card__content {
padding: 16px;
}
.card__title {
margin: 0 0 8px;
font-size: 20px;
}
.card__text {
margin: 0;
color: #536174;
line-height: 1.5;
}
.card--gray .card__image {
filter: grayscale(100%);
}
.card--dark .card__image {
filter: brightness(65%) contrast(120%);
}
.card--warm .card__image {
filter: sepia(70%) saturate(130%);
}
.card:hover .card__image {
filter: grayscale(0%) brightness(110%) saturate(120%);
transform: scale(1.04);
}
@media (max-width: 760px) {
.gallery {
grid-template-columns: 1fr;
}
body {
padding: 16px;
}
}
</style>
</head>
<body>
<main class="gallery">
<article class="card card--gray">
<img
class="card__image"
src="https://picsum.photos/id/1015/800/600"
alt="Гірський пейзаж біля річки"
>
<div class="card__content">
<h2 class="card__title">Відтінки сірого</h2>
<p class="card__text">
Зображення стає чорно-білим за допомогою grayscale().
</p>
</div>
</article>
<article class="card card--dark">
<img
class="card__image"
src="https://picsum.photos/id/1016/800/600"
alt="Лісова дорога"
>
<div class="card__content">
<h2 class="card__title">Контраст і яскравість</h2>
<p class="card__text">
Комбінація brightness() і contrast() змінює тон зображення.
</p>
</div>
</article>
<article class="card card--warm">
<img
class="card__image"
src="https://picsum.photos/id/1025/800/600"
alt="Собака дивиться в камеру"
>
<div class="card__content">
<h2 class="card__title">Теплий ефект</h2>
<p class="card__text">
Функції sepia() і saturate() створюють теплі насичені кольори.
</p>
</div>
</article>
</main>
</body>
</html>У цьому прикладі:
grayscale(100%) прибирає кольори з першої картки;
brightness(65%) затемнює зображення другої картки;
contrast(120%) збільшує контраст;
sepia(70%) додає теплий відтінок;
saturate(130%) робить кольори насиченішими;
під час наведення на будь-яку картку фільтри змінюються;
transition анімує зміну фільтрів.
Фільтри можна застосовувати не лише до зображень:
.notice {
padding: 24px;
background: #3b82f6;
color: white;
filter: contrast(120%) brightness(110%);
}У цьому випадку ефект застосовується і до синього фону, і до білого тексту.
Через це для затемнення фону блока краще часто використовувати окремий псевдоелемент, а не filter на всьому блоці:
.hero {
position: relative;
isolation: isolate;
color: white;
}
.hero::before {
position: absolute;
z-index: -1;
inset: 0;
background: url("https://picsum.photos/id/1018/1200/700") center / cover;
filter: brightness(55%);
content: "";
}
.hero__content {
padding: 80px 24px;
}Тут фільтр застосовується до псевдоелемента з фоновим зображенням, але не до тексту .hero__content.
Властивість backdrop-filter розмиває або змінює те, що знаходиться позаду напівпрозорого елемента:
.panel {
padding: 24px;
border: 1px solid rgb(255 255 255 / 40%);
border-radius: 16px;
background: rgb(255 255 255 / 25%);
backdrop-filter: blur(12px);
}На відміну від filter, властивість backdrop-filter не змінює сам елемент. Вона впливає на видиму область позаду нього.
Для помітного ефекту фон елемента зазвичай має бути прозорим або напівпрозорим:
.panel {
background: rgb(255 255 255 / 20%);
backdrop-filter: blur(10px) brightness(110%);
}Якщо фільтр не потрібен, використовується:
.element {
filter: none;
}Це значення повністю вимикає всі фільтри елемента.
Під час наведення можна явно повернути початковий вигляд:
.image {
filter: grayscale(100%);
}
.image:hover {
filter: none;
}Фільтри можуть змінювати контраст і читабельність. Особливо обережно використовуйте:
сильне затемнення;
сильне розмиття;
низький контраст;
повну інверсію;
фільтри на текстових блоках.
Якщо ефект використовується лише для оформлення, основний текст і важлива інформація мають залишатися читабельними.
Для ефектів, які запускаються наведенням, варто також враховувати сенсорні пристрої. На мобільному пристрої подія hover може працювати інакше, ніж на комп’ютері.
У CSS останнє оголошення властивості замінює попереднє:
.image {
filter: grayscale(100%);
filter: brightness(80%);
}У результаті зображення буде лише затемнене. Для комбінування потрібно записати функції в одному значенні:
.image {
filter: grayscale(100%) brightness(80%);
}Функції фільтра розділяються пробілами, а не комами:
/* Неправильно */
.image {
filter: grayscale(100%), brightness(80%);
}
/* Правильно */
.image {
filter: grayscale(100%) brightness(80%);
}Якщо затемнити контейнер із текстом, текст також стане темнішим:
.card {
filter: brightness(60%);
}Якщо потрібно затемнити лише фон або зображення, застосовуйте фільтр до окремого дочірнього елемента чи псевдоелемента.
Велика кількість ефектів може погіршити якість зображення і зробити інтерфейс важчим для сприйняття. Краще комбінувати лише ті фільтри, які потрібні для конкретного візуального ефекту.
filter і backdrop-filterfilter змінює сам елемент;
backdrop-filter змінює область позаду елемента.
Це різні властивості, хоча вони використовують подібний синтаксис функцій.
CSS-фільтри задаються властивістю filter.
blur() створює розмиття.
brightness() змінює яскравість.
contrast() змінює контраст.
grayscale() робить елемент чорно-білим.
sepia() додає теплий коричневий відтінок.
saturate() змінює насиченість кольорів.
hue-rotate() змінює відтінок.
invert() інвертує кольори.
drop-shadow() створює тінь за контуром видимої частини елемента.
Кілька фільтрів комбінуються через пробіл.
Порядок фільтрів впливає на результат.
backdrop-filter змінює вигляд вмісту позаду напівпрозорого елемента.
Для плавної зміни ефектів використовуйте transition.