CSS saturate() — насиченість кольорів
Опис
Функція saturate() дозволяє змінювати насиченість кольору елемента, надаючи дизайнеру можливість точного керування відтінками кольору на веб-сторінці.
Використання saturate() може привести до динамічних та виразних візуальних ефектів. Функція приймає значення, яке може бути додатним або навіть від'ємним. Значення впливає на насиченість кольору: збільшення значення збільшує насиченість, тоді як зменшення робить кольори менш насиченими. Ось приклад:
filter: saturate(1.5);
У цьому випадку насиченість кольору елемента збільшується у 1.5 рази, надаючи йому яскравіший вигляд.
Інші значення:
-1: максимальне зменшення насиченості;0: збереження насиченості без змін;1: збільшення насиченості у 2 рази;2: збільшення насиченості у 3 рази.
Значення можуть бути інтерпольовані для проміжних ступенів насиченості, що дає можливість детального керування кольором.
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Збільшення насиченості може зробити кольори яскравішими та насиченішими, що може бути корисно для створення живих та виразних дизайнів.
автор: Bond - Порада
-
Зменшення насиченості може призвести до відтінків сірого та зменшення насиченості кольорів, що створює більш приглушені та пом'якшені ефекти.
автор: Bond - Порада
-
Зверніть увагу, що функція
автор: Bondsaturate()є частиною фільтрів CSS та може бути застосована разом з іншими фільтрами для досягнення бажаного ефекту. - Нотатка
-
Функція
автор: Bondsaturate()є потужним інструментом для створення динамічного та атрактивного візуального враження. Вона допомагає дизайнерам та розробникам забезпечити яскравий та живий вигляд елементів веб-сайту, зберігаючи при цьому строгий контроль над кольоровою гамою.
Синтаксис
saturate(<value>)Функція saturate може отримувати єдине значення:
-
<value> -
Значення можуть бути додатніми або від'ємними. Використовуючи додатні значення, насиченість збільшується, а від'ємні значення зменшують насиченість. Значення
автор: Bond0залишає насиченість без змін.
| Значення без задання: | 1 |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 18 | 35 | 6 | 15 | 12 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 53 | 35 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<div id="description">
<h2>Приклад 2: зміна насиченності елемента</h2>
<p>Три картинки з різними значеннями функції saturate().</p>
</div>
<div id="result">
<div class="image-container">
<img class="image image0" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e63946'/%3E%3Crect y='20' width='40' height='20' fill='%232a9d8f'/%3E%3Ccircle cx='20' cy='20' r='11' fill='%23ffb703'/%3E%3C/svg%3E" alt="Зображення 1">
<p class="value">saturate(0.15)</p>
</div>
<div class="image-container">
<img class="image image1" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e63946'/%3E%3Crect y='20' width='40' height='20' fill='%232a9d8f'/%3E%3Ccircle cx='20' cy='20' r='11' fill='%23ffb703'/%3E%3C/svg%3E" alt="Зображення 2">
<p class="value">saturate(0.45)</p>
</div>
<div class="image-container">
<img class="image image2" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e63946'/%3E%3Crect y='20' width='40' height='20' fill='%232a9d8f'/%3E%3Ccircle cx='20' cy='20' r='11' fill='%23ffb703'/%3E%3C/svg%3E" alt="Зображення 3">
<p class="value">saturate(1)</p>
</div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.image-container {
display: inline-block;
text-align: center;
margin-right: 20px;
}
.image {
width: 200px;
height: 200px;
}
.value {
margin-top: 10px;
font-family: Arial, sans-serif;
}
.image0 {
filter: saturate(0.15);
}
.image1 {
filter: saturate(0.45);
}
.image2 {
filter: saturate(1);
}HTML
<div id="description">
<h2>Приклад 1: зміна насиченності елемента</h2>
<p>Наведіть курсор на квадрат, щоб побачити ефект функції saturate().</p>
</div>
<div id="result">
<img class="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e63946'/%3E%3Crect y='20' width='40' height='20' fill='%232a9d8f'/%3E%3Ccircle cx='20' cy='20' r='11' fill='%23ffb703'/%3E%3C/svg%3E" alt="Зображення 1">
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
.image {
width: 200px;
height: 200px;
transition: filter 0.5s ease;
}
.image:hover {
filter: saturate(0.5);
}Верхній ряд — сходинка насиченості від 0 до 4: видно, як після ~2 півтони злипаються, а канали впираються в межу. Далі — доказ, що saturate(0) і grayscale(1) дають однакову картинку, сірий блок, якому насиченість накрутити неможливо, доказ того, що після grayscale(1) фільтр уже безсилий, пара з переставленими saturate() і brightness() та невалідний saturate(-1), який гасить і розмиття поруч.
HTML
<p class="head">filter: saturate(N) — та сама смуга під різними значеннями:</p>
<div class="col">
<div class="strip v0">0</div>
<div class="strip v05">0.5</div>
<div class="strip v1">1 — як було</div>
<div class="strip v15">1.5</div>
<div class="strip v2">2</div>
<div class="strip v3">3</div>
<div class="strip v4">4</div>
</div>
<p class="head">saturate(0) і grayscale(1) — та сама картинка:</p>
<div class="row">
<span class="tile v0">saturate(0)</span>
<span class="tile gs">grayscale(1)</span>
</div>
<p class="head">Із сірого насиченість не витягнути жодним множником:</p>
<div class="row">
<span class="tile gray">сірий, без фільтра</span>
<span class="tile gray s5">сірий + saturate(5)</span>
</div>
<p class="head">Після grayscale(1) жоден saturate() уже нічого не змінює:</p>
<div class="row">
<span class="tile o1">grayscale(1)</span>
<span class="tile o2">grayscale(1) saturate(3)</span>
</div>
<p class="head">А ось де порядок вирішує все: saturate(3) спершу впирає канали
в межу, і подальше затемнення працює вже з обрізаним:</p>
<div class="row">
<span class="tile o3">saturate(3) brightness(0.6)</span>
<span class="tile o4">brightness(0.6) saturate(3)</span>
</div>
<p class="head">saturate(-1) — відкинуто ВЕСЬ список, разом із blur(2px):</p>
<div class="row">
<span class="tile bad">saturate(-1) blur(2px)</span>
<span class="tile good">saturate(1) blur(2px)</span>
</div>CSS
.head {
margin: 18px 0 6px;
color: #5a6472;
font-size: .9em;
}
.col {
display: flex;
flex-direction: column;
gap: 3px;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.strip {
display: flex;
align-items: center;
width: 420px;
max-width: 100%;
height: 34px;
padding-left: 8px;
background: linear-gradient(90deg, #c0392b, #f2b134 35%, #3a9a4f 65%, #2f6fd0);
color: #fff;
font: 600 12px/1 ui-monospace, monospace;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.tile {
display: flex;
align-items: flex-end;
width: 150px;
height: 78px;
padding: 6px;
background: linear-gradient(135deg, #c0392b, #f2b134 50%, #2f6fd0);
color: #fff;
font: 600 11px/1.25 ui-monospace, monospace;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.v0 { filter: saturate(0); }
.v05 { filter: saturate(0.5); }
.v1 { filter: saturate(1); }
.v15 { filter: saturate(1.5); }
.v2 { filter: saturate(2); }
.v3 { filter: saturate(3); }
.v4 { filter: saturate(4); }
.gs { filter: grayscale(1); }
.gray { background: #808080; }
.s5 { filter: saturate(5); }
.o1 { filter: grayscale(1); }
.o2 { filter: grayscale(1) saturate(3); }
.o3 { filter: saturate(3) brightness(0.6); }
.o4 { filter: brightness(0.6) saturate(3); }
.bad {
filter: saturate(-1) blur(2px);
outline: 2px dashed #d64545;
}
.good {
filter: saturate(1) blur(2px);
outline: 2px dashed #3a9a4f;
}Коментарі
Коментарів ще немає — будьте першим!