Когда нужно из цветного изображения сделать чёрно-белое. В основном, для разных hover-эффектов, когда цветная картинка при наведении курсора становится чёрно-белой. Ну или наоборот.
Способ работает абсолютно во всех браузерах, включая андроиды и 7-й афйон. Не работает только в IE10 и IE11, ну да хрен с ними.
Если надо обесцветить не все картинки на сайте, а только некоторые, присваиваем этим “некоторым” отдельный класс, например img.desaturate. CSS для всех современных браузеров (и настольных, и мобильных) будет состоять всего из одной строчки:
img.desaturate {
filter: grayscale(100%);}
Чтобы это работало в Firefox<35, в IE6–9 и в старых браузерах на движке Webkit, наш CSS будет немного больше:
img.desaturate {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg version='1.1'
xmlns='http://www.w3.org/2000/svg' height='0'><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>#greyscale");}
По этому принципу работают галереи на сайте mdstudio.ru, где превьюшки вместо цветных сделаны чёрно-белыми.
