Картинка. Обесцвечивание. CSS Filter Effects на CSS

Фильтры для изображений с CSS Filter Effects.

В графических редакторах очень легко менять яркость или контраст изображений, применять различные фильтры. С недавних пор это можно делать и средствами CSS прямо на веб-страницах с помощью CSS Filter Effects.

Эффекты

Применение эффектов очень простое, например, такая конструкция применяется для перевода цветного изображения в черно-белое:

img{-webkit-filter:grayscale(100%)}

Сепия:

img{-webkit-filter:sepia(100%)}

В обоих эффектах можно устанавливать уровень эффекта от 0 до 100%.

Яркость 50%:

img{-webkit-filter:brightness(50%)}

brightness может принимать отрицательные значения, изображение будет затемняться:

img{-webkit-filter:brightness(-50%)}

При 100% эффекта contrast изображение не меняется, поэтому можно установить 200%:

img{-webkit-filter:contrast(200%)}

Эффекты можно комбинировать:

img{-webkit-filter:grayscale(100%) contrast(150%)}

Так можно получить красивый hover-эффект:

img:hover{-webkit-filter:grayscale(0)}

img:hover{-webkit-filter:sepia(0)}

img:hover{-webkit-filter:brightness(0)}

img:hover{-webkit-filter:contrast(100%)}

Эффект blur:

img:hover{-webkit-filter:blur(5px)}

В спецификации подробно описаны остальные эффекты, такие как hue-rotate, invert и saturate. Но они гораздо менее применимы на живых проектах.

Полная запись для всех браузеров

img{-webkit-filter:sepia(100%);-moz-filter:sepia(100%);-ms-filter:sepia(100%);-o-filter:sepia(100%);filter:sepia(100%)}

img:hover{-webkit-filter:sepia(0);-moz-filter:sepia(0);-ms-filter:sepia(0);-o-filter:sepia(0);filter:none}