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


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

Код CSS

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

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

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

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

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

Код CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

1. CSS фильтр

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

Читайте также:  Tiworker exe windows modules installer worker

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

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

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

2. Javascript

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

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

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 осталось прописать сдедующее: