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

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

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

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

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

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

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

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

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

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

Бывает необходимо сделать изображение серым как можно быстрее и не используя графические редакторы. Конечно можно воспользоваться графическим редактором Adobe Photoshop(можно задать даже глубину и тон). В браузере конечно нельзя настраивать такие параметры, но наш глаз(если, конечно, вы не профессионал) почти не заметит разницы.

В этой статье мы рассмотрим способы как сделать изображение серым.

1. CSS фильтр

Использование свойства filter, пожалуй, является самым простым способом создать черно-белое изображение. Для создания черно-белого изображения в IE, необходимо использовать также свойство filter.

Сегодня, свойство filter является частью технологии CSS3, которое поддерживается такими браузерами как Firefox, Chrome и Safari. Webkit фильтры могут не только создавать эффект черно-белого изображения, но также могут придать эффект сепия и размытия.

Для того чтобы сделать изображение серым, необходимо прописать следующие свойства:

Данные код будет работать в IE6-9, Chrome18+, Safari 6.0+ и Opera15+.

2. Javascript

Альтернативой вышеприведенному коду является Javascript, который работает во всех браузерах, если он включен, включая IE6 и ниже.

Используя Javascript, мы можем задавать изображению черно-белый эффект, например, при наведении и клике по изображению. Совместно можно использовать jQuery, чтобы создать плавный эффект перехода к серому. Единственным недостатком является то, что Javascript может быть отключен в браузере.

Читайте также:  Samsung galaxy s9 все цвета

3. SVG

Другим способ является использование SVG фильтров.

Всё что вам нужно это создать SVG файл и использовать код ниже:

Затем необходимо связать SVG файл и ID:

Также весь код можно написать прямо в CSS:

Результат будет похожим.

Вывод

Для поддержки данного эффекта всеми браузерами, необходимо комбинировать все способы. Данный код будет работать в Firefox 3.5+, Opera15+, Safari, Chrome и IE.

Данный код можно использовать вместе с Javascript, и в случае, если Javascript отключен, будет работать данный код. В этом может помочь Modernizr.

Modernizr добавляет js класс для body, если Javascript включен в браузере, и пропишет класс no-js если Javascript отключен. А в CSS осталось прописать сдедующее:

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Где вживить чип в руку

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

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

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

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

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

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

Ссылка на основную публикацию
Как сделать flash игру
Если вы не наделены природным трудоголизмом — увы, ничего хорошего из этого не выйдет. Лень — враг всех, особенно создателей...
Как поменять вид диспетчера задач
А вот вопрос.почему каждый раз когда я выключаю компьютер а на следующий день включаю появляется надпись некорректное выключение. 30-04-2013 в...
Как поменять билеты ржд купленные через интернет
В жизни всегда есть место непредвиденным обстоятельствам. Если срочно потребовалось обменять или вернуть заранее приобретенный билет на более подходящий, это...
Как сделать input неактивным
Иногда на сайте необходимо сделать форму, в которую пользователь вводит какие-либо данные. Полей в форме может быть сколько угодно, однако...
Adblock detector