• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Чёрно-белый эффект для изображения на CSS (Как можно сделать веб мастеру картинку чёрно-белой?)
Чёрно-белый эффект для изображения на CSS
Kosten
Дата: Вторник, 2019-09-24, 02:53 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25131
Награды: 57


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

Для того, чтоб все корректно получилось, то здесь подключаем свойство filter и функцию grayscal, что будет менять оттенок картинки. Для того, чтоб все происходило плавно и безусловно смотрелось красиво, то здесь добавляем свойство transition, где указываем время, что отвечает за переход оттенка цвета.



HTML

Код
<img src="http://zornet.ru/_fr/83/7598030.jpg" alt="" class="cherno-belaya">
<img src="http://zornet.ru/_fr/83/9348590.jpg" alt="" class="cherno-belaya">

CSS

Код
.cherno-belaya {
    filter: grayscale(1);
    transition: 1s;
   }
   .cherno-belaya:hover {
    filter: grayscale(0);
   }

Так как это эффект, то по умолчанию у нас картинки идут в черно белой палитре, но при наведении клика они становятся цветными, и как уже было сказано, здесь можно задать скорость изменение цвета, что качается того, как наведете на картинку.

Демонстрация

[info]В браузере Internet Explorer свойство filter не работает.[/info]
Прикрепления: 2141115.jpg(17.5 Kb) · desamiuv.zip(2.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Чёрно-белый эффект для изображения на CSS (Как можно сделать веб мастеру картинку чёрно-белой?)
  • Страница 1 из 1
  • 1
Поиск: