Сепия элемента (filter-sepia)link

https://dev.ru.simai.io/ru/ui/utility/filter/filter-sepia.php

Данный модификатор позволяет отображать элемент с эффектом сепии, придавая ему теплый, коричневатый оттенок.

Классы и их значенияlink

Класс Значение
.sepia-none filter: sepia(0)
.sepia filter: sepia(1)

Описаниеlink

Модификатор sepia управляет отображением элемента с эффектом сепии.

  • sepia-none — без эффекта сепии,
  • sepia — элемент становится сепийным.

Можно использовать hover:sepia для изменения состояния при наведении.

Синтаксисlink

  • sepia-none — без сепии,
  • sepia — добавить сепию,
  • Можно использовать hover:sepia для сепии при наведении.

Пример использованияlink

<!-- Без сепии -->
<div class="sepia-none p-4 bg-primary color-on-surface-inverse">
  Без сепии
</div>

<!-- Сепия при наведении -->
<div class="sepia-none hover:sepia p-4 bg-secondary transition">
  Наведи для сепии
</div>