→ → Css черно белое изображение. CSS фильтры изображений

Css черно белое изображение. CSS фильтры изображений

CSS3 фильтры являются весьма интересным ответвлением от SVG, позволяющим изменять HTML-элементы и изображения, применяя фильтры размытия, яркости и многие другие. В этом уроке мы кратко рассмотрим, как именно они работают.

Как это работает?

Используя только CSS мы можем создавать некоторые довольно сложные эффекты. Они могут быть применены как к изображениям, так и к HTML-элементам. Свойство, которое используется для управления всеми этими эффектами - это filter .

filter: filter(value) ;

Как и следовало ожидать, для этого свойства требуется использование префикса браузера. Но на данный момент, только -webkit- (Chrome и Safari) является единственным движком браузеров, поддерживающим это свойство.

Webkit-filter: filter(value) ;
-moz-filter: filter(value) ;
-o-filter: filter(value) ;
-ms-filter: filter(value) ;

Фильтрация

Существует целый ряд фильтров, поэтому, чтобы получить более полное представление о каждом из них, давайте рассмотрим их по отдельности. Несколько фильтров могут быть применены к одному элементу (через пробел), например, brightness и blur :

filter: blur(5px ) brightness(0.5 ) ;

Есть несколько фильтров, которые не будут рассмотрены ниже, но их можно легко реализовать с уже существующими CSS (прозрачность и тени). Вот оригинальное изображение, которое мы будем использовать для демонстрации работы фильтров:

Я буду приводить фото c применением фильтра (первое фото) и результат работы фильтра в виде статичного изображения (второе фото), если вы используете браузер, который не поддерживает фильтры и не можете увидеть результат.

Размытие

Всегда хотели сделать гауссовское размытие для изображения или текста только при помощи одного CSS? С фильтрами вы это сможете! Размытие измеряется в пикселях, так что вы можете сделать что-то вроде этого:

filter: blur(5px ) ;
// Browser Specific
-webkit-filter: blur(5px ) ;
-moz-filter: blur(5px ) ;
-o-filter: blur(5px ) ;
-ms-filter: blur(5px ) ;

Яркость

Яркость измеряется от нуля до единицы, 1 - это полная яркость (белый цвет), а 0 - первоначальная яркость.

filter: brightness(0.2 ) ;
// Browser Specific
-webkit-filter: brightness(0.2 ) ;
-moz-filter: brightness(0.2 ) ;
-o-filter: brightness(0.2 ) ;
-ms-filter: brightness(0.2 ) ;

Насыщенность

Насыщенность измеряется в процентах.

filter: saturate(50% ) ;
// Browser Specific
-webkit-filter: saturate(50% ) ;
-moz-filter: saturate(50% ) ;
-o-filter: saturate(50% ) ;
-ms-filter: saturate(50% ) ;

Поворот тона

Этот фильтр позволяет Вам изменять тон, повернув его (представьте себе колесо цветов, которые вы затем поворачиваете). Он измеряется в градусах.

filter: hue-rotate(20deg) ;
// Browser Specific
-webkit-filter: hue-rotate(20deg) ;
-moz-filter: hue-rotate(20deg) ;
-o-filter: hue-rotate(20deg) ;
-ms-filter: hue-rotate(20deg) ;

Контрастность

Констрастность, опять же, измеряется в процентах. 100% является значением по умолчанию, 0% позволит создать полностью черное изображение. Все, что более 100% добавляет контраст!

filter: contrast(150% ) ;
// Browser Specific
-webkit-filter: contrast(150% ) ;
-moz-filter: contrast(150% ) ;
-o-filter: contrast(150% ) ;
-ms-filter: contrast(150% ) ;

Инверсия

Также измеряется в процентах. Доступны значения от 0% до 100%. Как ни странно, на данный момент, webkit не поддерживает инверсии, если они меньше, чем 100%.

filter: invert (100% ) ;
// Browser Specific
-webkit-filter: invert (100% ) ;
-moz-filter: invert (100% ) ;
-o-filter: invert (100% ) ;
-ms-filter: invert (100% ) ;

Обесцвечивание

Опять же, указываете значение в процентах, на которое вы хотите обесцветить изображение. Доступны значения от 0% до 100%.

filter: grayscale(100% ) ;
// Browser Specific
-webkit-filter: grayscale(100% ) ;
-moz-filter: grayscale(100% ) ;
-o-filter: grayscale(100% ) ;
-ms-filter: grayscale(100% ) ;

Сепия

Я полагаю, это очень полезно, если вы хотите опубликовать что-то в Instagram. Хотя я также полагаю, вы не будете использовать CSS для этого. Во всяком случае, подобные оттенки серого и негатива, в сумме, позволят вам добавить сепию к изображению. 100% - это будет завершенная сепия, 0% - исходное изображение.

filter: sepia(100% ) ;
// Browser Specific
-webkit-filter: sepia(100% ) ;
-moz-filter: sepia(100% ) ;
-o-filter: sepia(100% ) ;
-ms-filter: sepia(100% ) ;

Поддержка браузерами

Webkit Mozilla Trident Presto
Размытие Экспериментальная Нет Нет Нет
Яркость
Насыщенность
Поворот тонов
Контрастность
Инверсия Только полная инверсия
Обесцвечивание Экспериментальная
Sepia

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим

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

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

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

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

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

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

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

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

Img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ }

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

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

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

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

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

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

Img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ } img:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none; /* IE 6-9 */ }

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

Img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ /*Добавим вот такой вот код*/ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; /*конец кода с transition*/ } img:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none; /* IE 6-9 */ }

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

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

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

1. CSS фильтр

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

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

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

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

2. Javascript

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 var imgObj = document.getElementById ("js-image" ) ; function gray(imgObj) { var canvas = document.createElement ("canvas" ) ; var canvasContext = canvas.getContext ("2d" ) ; var imgW = imgObj.width ; var imgH = imgObj.height ; canvas.width = imgW; canvas.height = imgH; canvasContext.drawImage (imgObj, 0 , 0 ) ; var imgPixels = canvasContext.getImageData (0 , 0 , imgW, imgH) ; for (var y = 0 ; y < imgPixels.height ; y++ ) { for (var x = 0 ; x < imgPixels.width ; x++ ) { var i = (y * 4 ) * imgPixels.width + x * 4 ; var avg = (imgPixels.data [ i] + imgPixels.data [ i + 1 ] + imgPixels.data [ i + 2 ] ) / 3 ; imgPixels.data [ i] = avg; imgPixels.data [ i + 1 ] = avg; imgPixels.data [ i + 2 ] = avg; } } canvasContext.putImageData (imgPixels, 0 , 0 , 0 , 0 , imgPixels.width , imgPixels.height ) ; return canvas.toDataURL () ; } imgObj.src = gray(imgObj) ;

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

3. SVG

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

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

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

1 2 3 4 img { filter : url ("url("data:image/svg+xml;utf8,http: //www.w3 .org/2000 /svg"> #grayscale");" ) }

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

Вывод

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

1 2 3 4 5 6 7 8 img { -webkit-filter: grayscale(100% ) ; -webkit-filter: grayscale(1 ) ; filter : grayscale(100% ) ; filter : url ("../img/gray.svg#grayscale" ) ; filter : gray ; }

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

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

1 2 3 4 5 6 7 8 .no-js img { -webkit-filter: grayscale(100% ) ; -webkit-filter: grayscale(1 ) ; filter : grayscale(100% ) ; filter : url ("../img/gray.svg#grayscale" ) ; filter : gray ; }

CSS3-фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.

Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.

Изначально фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. С поддержкой SVG браузерами появилась возможность использовать эти эффекты непосредственно в браузерах.

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

Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент:hover .

Поддержка браузерами

IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

filter
blur() Значение задается в единицах длины, например px , em . Применяет размытие по Гауссу к исходному изображению. Чем больше значение радиуса, тем больше размытие. Если значение радиуса не задано, по умолчанию берется 0 .
brightness() Значение задается в % или в десятичных дробях. Изменяет яркость изображения. Чем больше значение, тем ярче изображение. Значение по умолчанию 1 .
contrast() Значение задается в % или в десятичных дробях. Регулирует контрастность изображения, т.е. разницу между самыми темными и самыми светлыми участками изображения/фона. Значение по умолчанию 100% . Нулевое значение скроет исходное изображение под темно-серым фоном. Значения, увеличивающиеся от 0 до 100% или от 0 до 1 , будут постепенно открывать исходное изображение до оригинального отображения, а значения свыше будут увеличивать контраст между светлыми и темными участками.
drop-shadow() Фильтр действует подобно свойствам box-shadow и text-shadow . Использует следующие значения: смещение по оси Х смещение по оси Y размытость растяжение цвет тени. Отличительная особенность фильтра заключается в том, что тень добавляется к элементам и его содержимому с учетом их прозрачности, т.е. если элемент содержит текст внутри, то фильтр добавит тень одновременно для текста и видимых границ блока. В отличие от других фильтров, для этого фильтра обязательно задание параметров (минимальное — величина смещения).
grayscale() Извлекает все цвета из картинки, делая на выходе черно-белое изображение. Значение задается в % или десятичных дробях. Чем больше значение, тем сильнее эффект.
hue-rotate() Меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге. Значение задается в градусах от 0deg до 360deg . 0deg — значение по умолчанию, означает отсутствие эффекта.
invert() Фильтр делает негатив изображения. Значение задается в % . 0% не применяет фильтр, 100% полностью преобразует цвета.
opacity() Фильтр работает аналогично со свойством opacity , добавляя прозрачность элементу. Отличительная особенность — браузеры обеспечивают аппаратное ускорение для фильтра, что позволяет повысить производительность. Дополнительный бонус — фильтр можно одновременно сочетать с другими фильтрами, создавая при этом интересные эффекты. Значение задается только в % , 0% делает элемент полностью прозрачным, а 100% не оказывает никакого эффекта.
saturate() Управляет насыщенностью цветов, работая по принципу контрастного фильтра. Значение 0% убирает цветность, а 100% не оказывает никакого эффекта. Значения от 0% до 100% уменьшают насыщенность цвета, выше 100% — увеличивают насыщенность цвета. Значение может задаваться как в % , так и целым числом, 1 эквивалентно 100% .
sepia() Эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект сепии.
url() Функция принимает расположение внешнего XML-файла с svg-фильтром, или якорь к фильтру, находящемся в текущем документе.
none Значение по умолчанию. Означает отсутствие эффекта.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

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

100 % ) ; }

Задать класс изображению тоже просто:

Добавление фильтра SVG

Код CSS, показанный выше, работает во всех современных версиях браузеров, как на настольных компьютерах, так и на мобильных устройствах, включая браузер Microsoft Edge.

Чтобы добиться такого же эффекта в браузере Firefox до версии 35, понадобится использовать фильтр SVG, который создадим в отдельном файле под названием desaturate.svg. В этом файле будет следующий код:

version ="1.1" xmlns="http://www.w3.org/2000/svg" > id ="greyscale" > type ="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" /> < /filter> < /svg>

Если код SVG выше выглядит слегка пугающе и массив в нем слишком сложен, не волнуйтесь. Это один из фрагментов кода, который мы советуем просто копировать и вставлять как стандартный рецепт для создания черно-белого изображения.

Вместе с этим файлом SVG, находящимся рядом со страницей HTML и нужным изображением, код CSS дополнится такой строкой:

Img.desaturate { filter: grayscale(100 % ) ; filter: url (desaturate.svg #greyscale ) ; }

Добавление поддержки браузера Internet Explorer

Чтобы эффект работал в браузере Internet Explorer от 6 до 9 версий, применим простой собственный фильтр корпорации Microsoft:

Img.desaturate { filter: gray ; filter: grayscale(100 % ) ; filter: url (desaturate.svg #greyscale ) ; }

Если нужно добавить поддержку устаревших версий браузеров на движке Webkit, расширим код таким образом:

Img.desaturate { -webkit-filter: grayscale(1 ) ; -webkit-filter: grayscale(100 % ) ; filter: gray ; filter: grayscale(100 % ) ; filter: url (desaturate.svg #greyscale ) ; }

Этот способ не работает в браузерах Internet Explorer 10 и 11 версий. Если нужно создать одинаковый визуальный эффект совершенно во всех браузерах, можно воспользоваться решением на языке программирования Javascript для разных браузеров или, например, скриптом Greyscale.js .

Код CSS, написанный выше, позволяет нам на лету визуально преобразовать изображение в черно-белое в браузере, без необходимости в сохранении новых версий в программе Photoshop. С помощью кода CSS также можно гораздо проще изменять изображение: например, если уменьшить процент в значениях свойства фильтра со 100% до 50%, то мы получим смешение эффекта обесцвечивания и изначального цветного изображения.

Немного более простой подход для устаревших версий браузера Firefox предполагает включение кода SVG прямо в код CSS без необходимости добавлять что-то в отдельный файл и в тег :

Img.desaturate { -webkit-filter: grayscale(100 % ) ; filter: grayscale(100 % ) ; filter: gray ; filter: url ("data:image/svg+xml;utf8,#greyscale" ) ; }

Перевод — Дежурка

 

 
Это интересно: