1. Яркость - brightness()
Значение задается в % или в десятичных дробях. Чем больше значение, тем ярче изображение. По умолчанию 1 (100%)
Оригинал
brightness(0.5)
brightness(1.5)
|
1 |
filter: brightness(0.5) |
2. Контрастность - contrast()
Значение задается в % или в десятичных дробях. Чем больше значение, тем выше контрастность. По умолчанию 1 (100%)
Оригинал
contrast(0.5)
contrast(2)
|
1 |
filter: contrast(0.5) |
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)
|
1 |
filter: drop-shadow(16px 16px 10px black) |
5. Оттенки серого - grayscale()
Значение задается в % или десятичных дробях от 0 до 1 (100%). Чем больше значение, тем сильнее ч/б эффект. По умолчанию 0
Оригинал
grayscale(0.5)
grayscale(1)
|
1 |
filter: grayscale(100%) |
6. Изменение оттенка - hue-rotate()
Значение задается в градусах от 0deg до 360deg от угла поворота в цветовом круге. По умолчанию 0deg
Оригинал
hue-rotate(90deg)
hue-rotate(270deg)
|
1 |
filter: hue-rotate(90deg) |
7. Инвертирование - invert()
Значение задается в % или десятичных дробях от 0 до 1 (100%). По умолчанию 0. 1 - полное инвертирование цвета.
Оригинал
invert(50%)
invert(100%)
|
1 |
filter: invert(100%) |
8. Прозрачность - opacity()
Фильтр действует подобно свойству opacity.
Значение задается в % или десятичных дробях от 0 до 1 (100%). По умолчанию 1. 0 - полная прозрачность.
Оригинал
opacity(0.3)
opacity(0.6)
|
1 |
filter: opacity(50%) |
9. Размытие - blur()
Значение задается в единицах длины, например px или em. Чем больше значение, тем больше размытие. По умолчанию 0
Оригинал
blur(3px)
blur(6px)
|
1 |
filter: blur(3px) |
10. Сепия - sepia()
Значение задается в % или десятичных дробях от 0 до 1 (100%). По умолчанию 0. 0 - полный эффект сепии.
Оригинал
sepia(0.5)
sepia(1)
|
1 |
filter: sepia(100%) |
11. SVG-фильтры - url()
Ссылка на SVG-фильтр, который может быть встроен во внешний файл или в текущий документ.
|
1 2 |
filter: url(resources.svg#f1) filter: url(#f1) |
Например:
|
1 2 3 4 5 6 7 8 9 |
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="f1"> <feComponentTransfer> <feFuncR type="table" tableValues="0.1 0"/> <feFuncG type="table" tableValues="0.6 0"/> <feFuncB type="table" tableValues="0.4 0"/> </feComponentTransfer> </filter> </svg> |
url(#f1)
12. Глобальные значения
none | Значение по умолчанию. Отсутствие эффекта. |
initial | Значение применяется для установки исходного значения свойства. |
inherit | Наследует значение от родительского элемента. |
unset | Устанавливает значение свойства как inherit, если свойство наследуется от своего родителя, в противном случае значение устанавливается как initial. |
13. Комбинирование фильтров
CSS свойство filter позволяет также применять к элементу несколько функций.
Оригинал
hue-rotate(90deg) invert(0.9)
filter: sepia(1) contrast(2)
|
1 |
filter: grayscale(0.5) blur(10px); |
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-
Спасибо, очень наглядно!