filter: sepia()

Примеры

Базовый пример

Используйте утилиты типа sepia и sepia-50 для управления эффектом сепии, применяемым к элементу:

sepia-0

sepia-50

sepia

<img class="sepia-0" src="/img/mountains.jpg" /><img class="sepia-50" src="/img/mountains.jpg" /><img class="sepia" src="/img/mountains.jpg" />

Использование пользовательского значения

Используйте синтаксис sepia-[<value>] , чтобы задать sepia amount на основе полностью пользовательского значения:

<img class="sepia-[.25] ..." src="/img/mountains.jpg" />

Для переменных CSS вы также можете использовать синтаксис: sepia-(<custom-property>)

<img class="sepia-(--my-sepia) ..." src="/img/mountains.jpg" />

Это просто сокращение, sepia-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a filter: sepia() утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<img class="sepia md:sepia-0 ..." src="/img/mountains.jpg" />

Подробнее об использовании вариантов читайте в документации по вариантам.