css.in.ua
Підтримати

CSS function saturate()

Опис

Функція saturate() дозволяє змінювати насиченість кольору елемента, надаючи дизайнеру можливість точного керування відтінками кольору на веб-сторінці.

Використання saturate() може привести до динамічних та виразних візуальних ефектів. Функція приймає значення, яке може бути додатним або навіть від'ємним. Значення впливає на насиченість кольору: збільшення значення збільшує насиченість, тоді як зменшення робить кольори менш насиченими. Ось приклад: 

filter: saturate(1.5);

У цьому випадку насиченість кольору елемента збільшується у 1.5 рази, надаючи йому яскравіший вигляд.

Інші значення:

  • -1: максимальне зменшення насиченості;
  • 0: збереження насиченості без змін;
  • 1: збільшення насиченості у 2 рази;
  • 2: збільшення насиченості у 3 рази.

Значення можуть бути інтерпольовані для проміжних ступенів насиченості, що дає можливість детального керування кольором.

Порада:

Збільшення насиченості може зробити кольори яскравішими та насиченішими, що може бути корисно для створення живих та виразних дизайнів.
Порада:

Зменшення насиченості може призвести до відтінків сірого та зменшення насиченості кольорів, що створює більш приглушені та пом'якшені ефекти.
Порада:

Зверніть увагу, що функція saturate() є частиною фільтрів CSS та може бути застосована разом з іншими фільтрами для досягнення бажаного ефекту.
Нотатка:

Функція saturate() є потужним інструментом для створення динамічного та атрактивного візуального враження. Вона допомагає дизайнерам та розробникам забезпечити яскравий та живий вигляд елементів веб-сайту, зберігаючи при цьому строгий контроль над кольоровою гамою.

Синтаксис

saturate(<value>)
<value>

Значення можуть бути додатніми або від'ємними. Використовуючи додатні значення, насиченість збільшується, а від'ємні значення зменшують насиченість. Значення 0 залишає насиченість без змін.

Переглядачі

Переглядач

18

35

6

15

12
Переглядач

4.4

53

35

6

Мобільних переглядачів ще не додано.

Приклади


Наведіть курсор на квадрат, щоб побачити ефект функції saturate().

Три картинки з різними значеннями функції saturate().

Спільнота

Зв'язок