css сделать изображение черно белым


Как сделать элемент чёрно-белым и обратно цветным средствами CSS? Вот кроссбраузерный вариант создания чёрно-белого изображения или элемента из цветного.

Код CSS

Внимание! Возможно, Вы уже увидели строчку с

В ней мы подключаем файл для того, чтобы обесцвечивание работало и в Firefox.

Достаточно просто создать файл grayscale.svg и добавить в него следующее:

ИЛИ (если хотим избежать создание дополнительного SVG-файла) добавляем к уже созданному классу строку:

Теперь его убираем обесцвечивание, то есть делаем элементом снова цветным. Например, при наведении курсора на элемент:

Код CSS

Пример работы, исходники — чёрно-белое изображение CSS

Добавляю к статье долгожданные пример работы и исходники.

Если в каком-то из браузеров не работает, напишите, пожалуйста. Буду дорабатывать)

Узнайте, как создать «черно-белое» изображение с помощью CSS.

Черно-белое изображение

Оттенки серого (100%)

Используйте свойство CSS filter для преобразования изображения в Черное и белое.

Пример в градациях серого

Изменить цвет всех изображений на черный и белый (100% серый):

Перейдите на наш CSS Images учебник, чтобы узнать больше о том, как стиль изображений.

Перейдите в наш CSS Filter свойство, чтобы узнать больше о CSS фильтров.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оцените статью