filter в современных браузерах

слева оригинал, посередине применение при подведении курсора, и справа как должно выглядеть при применении фильтра.



Преобразование в серые цвета (grayscale)

img {filter: grayscale(100%);}



Сепия (sepia)

img {filter: sepia(100%);}



Насыщенность (saturate)

img {filter: saturate(0%);}



Сдвиг цвета (hue-rotate)

img {filter: hue-rotate(180deg);}



Инверсия цвета (invert)

img {filter: invert(100%);}



Прозрачность (opacity)

img {filter: opacity(50%);}



Яркость (brightness)

img {filter: brightness(50%);}



Контраст (contrast)

img {filter: contrast(200%);}



Размытие (blur)

img {filter: blur(3px);}



Тени (drop-shadow)

img {filter: drop-shadow(4px 4px 6px #000);}





Перейти к статье