Функции фильтров в CSS 🎨

Функции фильтров в CSS 🎨

CSS позволяет накладывать поверх картинок или фонов различные фильтры. Почти как в Инстаграме. Можно, например, размыть или обесцветить изображение, сделать его более контрастным.

Функции используются в качестве значений для свойств filter и backdrop-filter.

🔜 blur() - примеряет размытие Гаусса к изображению.

🔜 brightness() - меняет яркость изображения.

🔜 contrast() - меняет контраст изображения.

🔜 drop-shadow() - задаёт тень для картинки.

🔜 grayscale() - делает изображение чёрно-белым.

🔜 hue-rotate() - меняет цвета изображения за счёт поворота цветового круга.

🔜 invert() - инвертирует цвета изображения, как бы выворачивает их, превращая в противоположные.

🔜 opacity() - меняет прозрачность изображения.

🔜 saturate() - меняет насыщенность цветов изображения.

🔜 sepia() - меняет цвета изображения на сепию — коричневые оттенки.

📎 Можно указать сразу несколько фильтров для одного элемента, перечислив их через пробел.

Подробнее в источнике: doka.guide/css/filter-functions

👍- если было полезно | ➡️ WebTaverna