Тестирование свойства Filter

на изображении ниже:

Ягуар

(оригинал)

наведите курсор мыши на картинки ниже, что бы увидеть, как применяется свойство filter с анимацией.

Значение blur

Ягуар

img.blur{filter: blur(2px);}

Значение brightness

Ягуар

img.brightness{filter: brightness(3);}

Значение contrast

Ягуар

img.contrast{filter: contrast(1.5);}

Значение saturate

Ягуар

img.saturate{filter: saturate(200%);}

Значение opacity

Ягуар

img.opacity{filter: opacity(50%);}

Значение invert

Ягуар

img.invert{filter: invert(100%);}

Значение sepia

Ягуар

img.sepia{filter: sepia(0.5);}

Значение grayscale

Ягуар

img.grayscale{filter: grayscale(0.7);}

Значение hue-rotate

Ягуар

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

Значение drop-shadow(x,y,радиус,цвет)

Ягуар

img.drop-shadow{filter: drop-shadow(5px 5px 20px #222);}


Вернуться к статье