Что почитать

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


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



Демонстрация / Скачать исходники / Спецификация Filter Effects 1.0

Поддержка браузерами


Как обычно, браузеры, поддерживающие данный параметр, можно посмотреть на caniuse.com:



Эффекты


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

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. Но они гораздо менее применимы на живых проектах.

Примеры с сайта hongikat.com

Источник: http://habrahabr.ru/post/155353/