Как сделать элемент чёрно-белым и обратно цветным средствами 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).
Ну вот и всё. А получилось у нас следующее (попробуйте навести на картинку ниже).
Русский
English