Черно-белые картинки с помощью CSS


Бывает надо быстро сделать определенные изображения на сайте черно-белыми. Казалось бы что может быть проще – берем изображения прогоняем через фильтр и загружаем обратно на сайт. Но над быстро и например на время. Тогда нам помощь приходит CSS3.

Код CSS:

img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url('/grayscale.svg#greyscale');
    filter: gray;
    -webkit-filter: grayscale(1);
}

Создадим файл 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

Copyright © 2013-2017