Как сделать картинку черно белой css

Как при помощи CSS сделать картинку черно-белой?

UPD1:
Инструменты серверного программирования недоступны. Только клиентский CSS.

Мб объяснить заказчику, что браузер — не фотошоп?)

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css3 css или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

CSS свойство filter grayscale на практике

CSS свойство filter grayscale на практике

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

На сегодняшний день существует 10 различных фильтров, но мы с вами рассмотрим только один – grayscale. Остальные фильтры можно применять по аналогии.

Например мы хотим заменить цветную фотографию на черно-белую при наведении курсора. Раньше потребовалось бы подготовить две фотографии: цветную и черно-белую и при наведении курсора, на месте черно-белой фотографии появлялась бы цветная. С появлением в CSS3 свойства filter, достаточно просто одной цветной фотографии и немного кода.

filter: grayscale(1); /* где 1 – оттенки серого цвета */

У нас будет следующая HTML структура: Создаем большой серый блок-контейнер с классом img-wrap, куда помещаем три блока .holder с фотографиями с классом img-1.

HTML код целиком:

Блоки с фотографиями встали в ряд, благодаря float:

CSS свойство filter grayscale на практике.

Как вы видите на первом скриншоте, для примера используются фотографии разного размера. Как сделать так, чтобы визуально они выглядели одинаковыми, без правок в графическом редакторе? Надо задать нужные вам размеры блока с картинкой, а что не помещается в блок holder, спрятать overflow: hidden.

.holder <
width: 200px;
height: 200px;
overflow: hidden;
>

CSS свойство filter grayscale на практике.

Чтобы наши барышни не выглядели, как на "доске почета", скруглим углы блока.

Изменим правила расчета ширины и высоты серого блока-контейнера. Что это значит? По умолчанию к размерам контента прибавляются ещё и размеры отступов, полей и бордюров. Но мы говорим, что не надо учитывать их при расчете ширины и высоты блока. Иными словами, если мы задаем ширину серого блока 780 пикселей, то никакие поля этот размер не изменят.

CSS свойство filter grayscale на практике.

Давайте посмотрим на полученный блок с фотографиями с точки зрения дизайна. Сейчас на сером фоне мы видим три разноцветных пятна, это выглядит безвкусно, нет никакой гармонии с фоном. Простыми строчками в файле стилей, сделаем картинки черно-белыми. Для этого применим наконец-то CSS filter grayscale с максимальным значением (1) или (100%).

.holder .img-1 <
filter: grayscale(1); /* где 1 – оттенки серого цвета */
transition: 0.5s ease-in-out;
>

CSS свойство filter grayscale на практике.

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

.holder:hover .img-1 <
filter: grayscale(0); /* 0 – исходное цветное изображение */
transition: 0.5s ease-in-out; /* плавная смена оттенка */
>

Данный эффект с применением filter grayscale можно увидеть на демо.

Поддержка в браузерах

Не поддерживают старые браузеры, а также все версии IE. Chrome с 49 по 62 версии требует добавления префикса "-webkit-".

CSS код целиком:

#img-wrap <
background: #ccc;
margin: 40px auto;
width: 780px;
height: 270px;
padding: 20px;
box-sizing: border-box;
>

.holder <
width: 200px;
height: 200px;
margin: 20px;
float: left;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
border: 2px solid #868383;
>

/* black and white hover effect */
.holder .img-1 <
filter: grayscale(1);
-webkit-filter: grayscale(1);
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
>

.holder:hover .img-1 <
filter: grayscale(0);
-webkit-filter: grayscale(0);
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 2 ):

Хорошая возможность привлекать и задерживать внимание на каких либо блоках или изображениях. Спасибо, не знал о таких фильтрах. Трансформирование не решало такую задачу, а фильтр реально манипуляции с кодом.

люблю лаконичный код. filter: grayscale(1);

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Обесцветить картинку CSS и CSS3 transitions

Привет. Сегодня уже никого не удивишь красивыми эффектами на сайтах. Некоторые вот уже последние 10 лет делают это на Flash, другие — ещё не перестали делать на Javascript, но самые продвинутые уже давно используют CSS3. Вот этим мы сегодня и займемся.

Научимся как обесцветить картинку CSS (Grayscale image css), и сделаем это красиво

Итак, начнем с простого, нам нужны красивые фото, возьмём вот такое:

Нам нужно его обесцветить (обесцветить картинку CSS — убрать цвета, сделать картинку черно-белой). Для этого (да и вообще для работы с графикой) в CSS3 есть специальное средство filter.

Вот его мы и применим.

Решение: обесцветить картинку CSS

Сначала сверстаем саму картинку:

Затем пропишем для картинки стиль:

Теперь наша картинка станет черно-белой.

Можно, конечно, на этом остановится, но гораздо интереснее, когда картинка ещё и отвечает на действия пользователя.

Предлагаю сделать так, чтобы при наведении на картинку, она плавно становилась цветной.

На самом деле, сделать это совсем не сложно, и вовсе не обязательно знать Javascript.

Анимировать обесцветить картинку CSS

Немного дополним наш предыдущий стиль:

Это позволит картинке при наведении на неё мышкой, становится цветной. А ещё восмользуемся CSS3 transition, чтобы сделать процесс обесцвечивания анимированным:

Параметр all в transition говорит, что правило будет работать для всех стилей, а второй параметр — время анимации.
В первый параметр можно указать определённое свойство (например height, чтобы анимировать только высоту), а во второй время в секундах (можно в десятичных дробях — 0,1s).

Ну вот и всё. А получилось у нас следующее (попробуйте навести на картинку ниже).

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

Ваш адрес email не будет опубликован.