Если кто не знает, то можно сделать преобразование из разноцветного изображения или картинки в оттенок серого цвета, где все создается с помощью CSS3. Где совершенно нет не какой необходимости для сохранения отдельные цветные и полутоновые изображения, которые затем могут отображаться для различных целей.
Такой трюк будет полезен в различных случаях, все зависит от самого дизайна и безусловно функциональности сайта. К счастью, есть CSS-фильтры, которые делают процесс преобразования цветного изображения в оттенки серого очень простым.
Код CSS для цвета в градациях серого
HTML
Код
<img src="http://zornet.ru/_fr/78/9953396.png">
CSS
Код
img {
filter: gray;
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
Первая строка предназначена для Internet Explorer 6–9, вторая для Firefox, а фильтр веб наборов для Google Chrome, Safari и Opera.
Несмотря на обещание кросс-браузерной функциональности, могут возникнуть некоторые проблемы, особенно с более поздними версиями Internet Explorer, Safari и Opera.
Оттенки серого в цвет при наведении
Может быть полезно восстановить цвет до версии в оттенках серого, когда пользователь наводит курсор на изображение с помощью курсора.
Код
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
Чтобы отменить эффект, то есть отобразить цветное изображение и преобразовать его в оттенки серого только при наведении курсора на него, просто поменяйте местами код. Другими словами, img: hover будет содержать код для фильтрации в оттенках серого.
Необходимо нейтрализовать эффект оттенков серого изображения, когда курсор не находится над изображением. Это можно сделать, разместив код для отмены фильтра градаций серого в разделе img.
Альтернативный код CSS
Другой вариант - создать серый наложение div и изменить непрозрачность. Однако это не настоящий эффект оттенков серого, но, тем не менее, стоит рассмотреть.
CSS
Код
#myImage {
opacity: 0.4;
filter: alpha(opacity=40);
}
#wrapper {
opacity: 0.4;
filter: alpha(opacity=40);
background-color: #000;
}
Теперь просто поместите изображение в div следующим образом:
HTML
Код
<div id="wrapper"> <img id="myImage" src="http://zornet.ru/_fr/78/0895049.png"/></div>
Этот код мог бы работать так же хорошо для цветного фильтра по изображению, а не только для эффекта потемнения.
