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

CSS function sepia()

Опис

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

Функція sepia() не приймає аргументів і працює безпосередньо з властивостями CSS, такими як filter або background-image. Ви можете застосовувати sepia() до зображень, фонових зображень або інших елементів, що мають властивості кольору. Застосовуючи цю функцію, ви можете змінити спосіб відображення кольорів і надати зображенням чи елементам вигляд, схожий на той, що мають старі фотографії з епохи сепії.

Значення функції sepia() може бути від 0 до 1, де 0 означає, що сепія не застосовується, а 1 - повне перетворення кольору в сепію. Наприклад, sepia(0.6) застосує 60% ефекту сепії до зображення, зберігаючи часткову кількість кольору.

Приклади коректних значень: sepia(0), sepia(0.5), sepia(1).

Значення поза діапазоном 0 - 1 будуть ігноруватись.

Порада:

Використовуйте значення mount у межах від 0 до 1, щоб контролювати ступінь сепії від мінімального до максимального.
Порада:

Результат ефекту sepia() може варіюватись в залежності від вхідного зображення та його кольорової палітри. Експериментуйте з різними значеннями, щоб досягти бажаного вигляду.
Порада:

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

Синтаксис

sepia(<amount>)
<amount>

Числове значення в діапазоні від 0 до 1, яке визначає ступінь сепії. Значення 0 означає відсутність ефекту сепії (без змін), а 1 - максимально можливу ступінь ефекту сепії.

Переглядачі

Переглядач

18

35

6

15

12
Переглядач

4.4

53

35

6

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

Приклади


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

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

Спільнота

Зв'язок