CSS свойство filter позволяет применять к элементу различные графические эффекты, например размытие, смещение цвета, контрастность и другие.

К элементам можно применять несколько фильтров или использовать свои на SVG.

1. Яркость — brightness()

Значение задается в % или в десятичных дробях. Чем больше значение, тем ярче изображение. По умолчанию 1 (100%)

Оригинал
brightness(0.5)
brightness(1.5)
2. Контрастность — contrast()

Значение задается в % или в десятичных дробях. Чем больше значение, тем выше контрастность. По умолчанию 1 (100%)

Оригинал
contrast(0.5)
contrast(2)
3. Насыщенность — saturate()

Значение задается в % или десятичных дробях. По умолчанию 1. Значение ниже убирает цветность, выше — прибавляет.

Оригинал
saturate(0.5)
saturate(3)
4. Тень — drop-shadow()

Фильтр действует подобно свойствам box-shadow и text-shadow.

[сдвиг по x] [сдвиг по y] [радиус размытия] [растяжение] [цвет]

Оригинал
drop-shadow(4px 4px 4px black)
drop-shadow(8px 8px 8px black)
5. Оттенки серого — grayscale()

Значение задается в % или десятичных дробях от 0 до 1 (100%). Чем больше значение, тем сильнее ч/б эффект. По умолчанию 0

Оригинал
grayscale(0.5)
grayscale(1)
6. Изменение оттенка — hue-rotate()

Значение задается в градусах от 0deg до 360deg от угла поворота в цветовом круге. По умолчанию 0deg

Оригинал
hue-rotate(90deg)
hue-rotate(270deg)
7. Инвертирование — invert()

Значение задается в % или десятичных дробях от 0 до 1 (100%). По умолчанию 0. 1 — полное инвертирование цвета.

Оригинал
invert(50%)
invert(100%)
8. Прозрачность — opacity()

Фильтр действует подобно свойству opacity.

Значение задается в % или десятичных дробях от 0 до 1 (100%). По умолчанию 1. 0 — полная прозрачность.

Оригинал
opacity(0.3)
opacity(0.6)
9. Размытие — blur()

Значение задается в единицах длины, например px или em. Чем больше значение, тем больше размытие. По умолчанию 0

Оригинал
blur(3px)
blur(6px)
10. Сепия — sepia()

Значение задается в % или десятичных дробях от 0 до 1 (100%). По умолчанию 0. 0 — полный эффект сепии.

Оригинал
sepia(0.5)
sepia(1)
11. SVG-фильтры — url()

Ссылка на SVG-фильтр, который может быть встроен во внешний файл или в текущий документ.

Например:
url(#f1)
12. Глобальные значения
none
Значение по умолчанию. Отсутствие эффекта.
initial
Значение применяется для установки исходного значения свойства.
inherit
Наследует значение от родительского элемента.
unset
Устанавливает значение свойства как inherit, если свойство наследуется от своего родителя, в противном случае значение устанавливается как initial.
13. Комбинирование фильтров

CSS свойство filter позволяет также применять к элементу несколько функций.

Оригинал
hue-rotate(90deg) invert(0.9)
filter: sepia(1) contrast(2)
14. Совместимость с браузерами

IE: не поддерживает

Edge: 13.0 кроме SVG

Firefox: 35.0

Chrome: 18.0 -webkit-

Safari: 9.1, 6.0 -webkit-

Opera: 40.0, 15.0 -webkit-

iOS Safari: 9.3, 6.1 -webkit

Android Browser: 53.0, 4.4 -webkit-

Chrome for Android: 55.0, 47.0 -webkit-

Подробнее можно узнать на сайте MDN

Добавить комментарий

Ваш комментарий отправлен!