Статьи, приемы, хитрости и Уроки по Photoshop, Illustrator, Web дизайну и кодингу.

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

Вы никогда не хотели сделать полноцветное изображение черно-белым? В сегодняшнем уроке покажу вам небольшой 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%);
 }

 

Последнее изменениеСреда, 10 Сентябрь 2014 13:07
  • Оцените материал
    (1 Голосовать)
  • Опубликовано в Web coding
  • Прочитано 2752 раз
SeRbGa

SeRbGa

мечтатель

Сайт: www.serbga.ru

Оставить комментарий

Добавить комментарий


Защитный код
Обновить

Наверх

Популярные статьи

  • 1
  • 2
  • 3
  • 4

последние комментарии

ON-Line Блог SeRbGa.ru предоставляет самую свежую и актуальную информацию для веб-дизайнеров и разработчиков в виде тематических материалов, уроков созданных собственноручно, а так же переводов статей и новостей, полученных с зарубежных информационных ресурсов.

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на данный сайт!

ДИСКЛЕЙМЕР/DISCLAIMER:

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