Нанесение черно-белого эффекта на цветное изображение

Нанесение на цветное изображение чёрно-белого эффекта при помощи элементов CSS? Это пример воздействия CSS на изображения и применения к нему цветового стиля.

CSS

.grayscale {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}

В этой строчке мы подключаем файл для обесцвечивания объекта в браузере Firefox.

filter: url(grayscale.svg#greyscale);

Создаём файл grayscale.svg и добавляем в него следующий код:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>

Убираем чёрно-белый цвет и делаем объект обратно цветным при наведении на него курсора мышки:

CSS

.grayscale:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
}

Пример использования кода CSS

Так же во вложении Вы найдёте исходник и пример работы данного метода.

.Еще сайты сделаные нами: