CSS фильтры для изображений: css.filter
CSS-фильтры (свойство filter) — это инструмент, с помощью которого можно применять визуальные эффекты к элементам на веб-странице. Он похож на фильтры в редакторах изображений и позволяет модифицировать внешний вид элементов, используя различные эффекты, такие как размытие, контраст, яркость и многое другое.
Синтаксис
css filter: <функция1>(значение) <функция2>(значение) ...;
Доступные фильтры
- blur(радиус): Размытие элемента по заданному радиусу.
- Пример:
filter: blur(5px); - brightness(процент): Регулирует яркость элемента.
- Пример:
filter: brightness(150%);— увеличивает яркость на 50%. - contrast(процент): Контролирует контраст элемента.
- Пример:
filter: contrast(200%);— увеличивает контраст в 2 раза. - grayscale(процент): Преобразует элемент в оттенки серого.
- Пример:
filter: grayscale(100%);— делает элемент полностью черно-белым. - invert(процент): Инвертирует цвета.
- Пример:
filter: invert(100%);— полностью инвертирует цвета. - opacity(процент): Устанавливает прозрачность элемента.
- Пример:
filter: opacity(50%);— делает элемент наполовину прозрачным. - saturate(процент): Изменяет насыщенность цвета.
- Пример:
filter: saturate(200%);— увеличивает насыщенность в 2 раза. - sepia(процент): Применяет эффект сепии.
- Пример:
filter: sepia(100%);— делает элемент полностью сепийным. - drop-shadow(смещение-x смещение-y размытие цвет): Добавляет тень к элементу.
- Пример:
filter: drop-shadow(5px 5px 5px black); - hue-rotate(градусы): Поворачивает оттенок цвета на определенное количество градусов.
- Пример:
filter: hue-rotate(90deg);
Примеры комбинирования
Можно комбинировать несколько фильтров, перечисляя их через пробел.
css filter: grayscale(50%) blur(5px) brightness(120%);
Поддержка браузерами
filter широко поддерживается большинством современных браузеров, включая те, что используют движок WebKit (например, Safari и старые версии Chrome). В случае с WebKit раньше требовалось использование префикса -webkit-, но сейчас он не обязателен:
css -webkit-filter: blur(5px); /* Для старых версий WebKit */ filter: blur(5px);
Альтернатива WebKit
filter — это стандартное CSS-свойство, не зависящее исключительно от WebKit. Оно поддерживается всеми основными браузерами, включая Gecko (Firefox) и Blink (Chrome, Opera).