10 Сен

CSS3: Преобразование цветного изображения в черно-белое

Сентябрь 10
Автор SeRbGa
Печать Эл. почта

Вы никогда не хотели сделать полноцветное изображение черно-белым? В сегодняшнем уроке покажу вам небольшой CSS3 фрагмент, который будет легко конвертировать ваши изображения в черно-белое, без необходимости использовать Photoshop. CSS3 фрагмент будет преобразовывать изображение с оттенками серого с использованием фильтров.

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

CSS3 фрагмент: Преобразование цветного изображения в черно-белое

HTML

Давайте начнем с HTML, ваше изображение будет окружено тегами DIV с ID «image-bl». Если вы хотите добавить больше чем один черно-белый эффект нужно дать название каждому контейнеру свой собственный ID.

<div id="image-bl">
 <img src="/images/NEWS/web/web_coding/10.09.2014/602554994.jpg" >
 </div>

CSS3

Теперь для CSS, мы применили три фильтра, первый - частичный фильтр SVG изображения, второй фильтр будет стандартный, в то время как третий фильтр будет направлен на веб-браузеры, как Safari и Chrome.

#image-bl{
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale");
 filter: gray;
  -webkit-filter: grayscale(100%);
 }