filter

Примеры

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

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

blur-xs

grayscale

combined

<img class="blur-xs" src="/img/mountains.jpg" /><img class="grayscale" src="/img/mountains.jpg" /><img class="blur-xs grayscale" src="/img/mountains.jpg" />

Вы можете комбинировать следующие утилиты фильтров: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate и sepia.

Удаление фильтров

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

<img class="blur-md brightness-150 invert md:filter-none" src="/img/mountains.jpg" />

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

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

<img class="filter-[url('filters.svg#filter-id')] ..." src="/img/mountains.jpg" />

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

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

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

Применение при наведении

Префикс a filter утилиты с вариантом, например hover:*, чтобы применить утилиту только в этом состоянии:

<img class="blur-sm hover:filter-none ..." src="/img/mountains.jpg" />

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

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

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

<img class="blur-sm md:filter-none ..." src="/img/mountains.jpg" />

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