Тестирование свойства 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);}