Самый простой способ обесцвечивания цветного изображения - с помощью CSS. Обычно фильтр применяется к классу, так как нередко нужно создать одинаковый эффект у нескольких изображений:
100 % ) ; }
Задать класс изображению тоже просто:
Добавление фильтра SVG
Код CSS, показанный выше, работает во всех современных версиях браузеров, как на настольных компьютерах, так и на мобильных устройствах, включая браузер Microsoft Edge.
Чтобы добиться такого же эффекта в браузере Firefox до версии 35, понадобится использовать фильтр SVG, который создадим в отдельном файле под названием desaturate.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" ) ; }
Перевод — Дежурка
CSS свойства достигли такого уровня развития, что способны справиться с некоторыми важными функциями графических редакторов. Пример тому – CSS-фильтры, с помощью которых можно создавать красивые эффекты для изображений.
Если раньше трудно было это даже представить, то сейчас в каскадной таблице реализованы практически все программные фильтры, начиная от размытия и заканчивая художественно-цветовыми моделями.
Но все же в CSS-фильтрах имеется один небольшой недостаток – не все веб-браузеры поддерживают визуальные эффекты. Разумеется, это лишь вопрос времени. И к наступлению часа «х» разработчикам нужно быть готовым. А пока рассмотрим то, что на данный момент уже реализовано.
Поддержка CSS фильтров браузерами
В основном все ходовые браузеры, Firefox, Chrome, Opera, имеют «дружеское» отношение с фильтр-эффектами. Чего не скажешь о IE, который напрочь отказывается поддерживать эффекты, даже в самых поздних версиях.
| Браузер | Explorer | Chrome | Firefox | Safari | Opera | Android | iOS |
|---|---|---|---|---|---|---|---|
| Версия | no | 31+ | 35+ | 7+ | 18+ | 4.4+ | 6+ |
| filter | — | (-webkit-) | + | (-webkit-) | (-webkit-) | (-webkit-) | (-webkit-) |
Функции и синтаксис CSS фильтров
Во всех свойствах CSS имеются некие параметры, сочетающие в себе порядок прописывания значений. Свойство filter не является исключением, как и другие, оно может использовать комбинацию нескольких правил в одном применении. К примеру, добавить фильтр яркости для изображения, а через пробел указать еще один — контрастность. Мы рассмотрим все в этой статье с несколькими примерами для лучшего понимания.
Синтаксис
Filter: название фильтра (процент значения) ; filter: url(img.svg); filter: blur(10px); filter: brightness(0.9); filter: contrast(150%); filter: drop-shadow(5px 5px 10px black); filter: grayscale(80%); filter: hue-rotate(60deg); filter: invert(80%); filter: opacity(50%); filter: saturate(50%); filter: sepia(40%); /* Применение нескольких фильтров */ filter: contrast(150%) grayscale (80%);
Список фильтров
| Фильтр | Описание |
|---|---|
| blur (px) | Фильтр для размытия изображения. Степень размытия указывается в пикселях. Если число не задано, то по умолчанию используется 0. |
| drop-shadow () | Тень. Альтернатива свойству box-shadow с аналогичными параметрами и тем же порядком прописывания. Исключением является четвертое значение «растяжение»: почти все браузеры его не поддерживают. |
| grayscale (%) | Фильтр «обесцветить». Применяются оттенки серого цвета к изображению в зависимости от указанного процента. Не допускается отрицательное значение, а оригинальность картинки равна 0. |
| brightness (%) | Настройка яркости изображения. Значение в 100% показывает исходную точку яркости. Регулировка совершается как отрицательно (-50%), так и положительно (150%). |
| contrast (%) | Настройка контрастности изображения. Как и в предыдущем фильтре, значение в 100% покажет исходную точку. Изменения можно задавать отрицательные (-20%) и положительные (120%). |
| hue-rotate (deg) | Поворотное наложение тона цвета. В зависимости от указанного градуса (от 0deg до 360deg) на изображение будет налаживается цвет, который определяется по цветовому кругу. |
| invert (%) | Инверсия изображения. Применяется значение от 0 до 100% без отрицательного параметра. |
| saturate (%) | Насыщенность изображения. Исходное положение определяется в 100% и не имеет отрицательного значения. |
| sepia (%) | Эффект сепия. Оригинальность картинки определяется в 0% и доступна до значения 100% без отрицания. |
| opacity (%) | Прозрачность картинки. Еще один фильтр, у которого есть аналогичное свойство opacity с таким же способам в использовании. Настройка допускается от 0 до 100% без отрицательного параметра. |
| url () | CSS ссылка на SVG элемент с определенным идентификатором #id. |
| initial | Устанавливает значение свойства по умолчанию. |
| inherit | Наследует все значения свойства своего родительского элемента. |
Примеры CSS filters
Мы подошли к интересной части статьи, в которой рассмотрим каждый фильтр в отдельности с примерами его применения. Для наглядности будут использоваться три картинки. Первая покажет исходную точку, облик оригинальности. Вторая послужит статичным примером в применении фильтра, а третья покажет hover-эффект, наведение курсора мыши на изображение.
Фильтр размытия
В графических редакторах фильтр размытия является незаменимым инструментом и часто применяемым в работе. Он способен непросто создавать расплывчатое изображение, а делать эффект фокусирования на определенном элементе при этом остальная часть изображения попадает под размытие. И многое другое.
В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efbl1 img{ filter: blur(2px); -webkit-filter: blur(2px); } /*для hover-эффекта*/ .efbl2 img{ transition: all 0.6s ease 0s; } .efbl2:hover img{ filter: blur(4px); -webkit-filter: blur(4px); transition: all 0.6s ease 0s; }
Фильтр тень
Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.
Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента.
Также интересным является то, что когда у блока нет фона, а лишь задана обводка border , то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efdrswd1 img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); } /*для hover-эффекта*/ .efdrswd2 img{ transition: all 0.6s ease 0s; } .efdrswd2:hover img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); transition: all 0.6s ease 0s; }
Фильтр обесцвечивания
Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efgrays1 img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); } /*для hover-эффекта*/ .efgrays2 img{ transition: all 0.6s ease 0s; } .efgrays2:hover img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); transition: all 0.6s ease 0s; }
Фильтр яркости
Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efbrig1 img{ filter: brightness(150%); -webkit-filter: brightness(150%); } /*для hover-эффекта*/ .efbrig2 img{ transition: all 0.6s ease 0s; } .efbrig2:hover img{ filter: brightness(150%); -webkit-filter: brightness(150%); transition: all 0.6s ease 0s; }
Фильтр контрастности
Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efcontr1 img{ filter: contrast(150%); -webkit-filter: contrast(150%); } /*для hover-эффекта*/ .efcontr2 img{ transition: all 0.6s ease 0s; } .efcontr2:hover img{ filter: contrast(150%); -webkit-filter: contrast(150%); transition: all 0.6s ease 0s; }
Фильтр тона цвета
Отличный дизайнерский прием в оформлении изображения, под стиль основного дизайна ресурса. Суть заключается в наложении оттенка выбранного цвета на исходную картинку. Соотношения выходят в зависимости от заданного градуса, который указывает точку цвета на цветовом круге.
Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efhrotai1 img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); } /*для hover-эффекта*/ .efhrotai2 img{ transition: all 0.6s ease 0s; } .efhrotai2:hover img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); transition: all 0.6s ease 0s; }
Фильтр инверсия
Специфический эффект, позволяющий перевернуть цвет изображения верх дном. В графических редакторах имеет определенную роль и бывает так, что без его участия не добиться нужного результата. Параметр фильтра инвертирования указывается лишь в положительную сторону от значения 0% до 100%.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efinve1 img{ filter: invert(100%); -webkit-filter: invert(100%); } /*для hover-эффекта*/ .efinve2 img{ transition: all 0.6s ease 0s; } .efinve2:hover img{ filter: invert(100%); -webkit-filter: invert(100%); transition: all 0.6s ease 0s; }
Фильтр насыщенность
Когда изображение теряет свой естественный цвет красок по неизвестным причинам (что-то вроде выгоревшей футболки на солнце), то увеличением насыщенности можно вмиг восстановить прежний вид. А если этот фильтр использовать в сочетании с другими фильтрами, результат будет весьма удовлетворительным. Настройка совершается от 0 исходный вид, до больших чисел.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efsatut1 img{ filter: saturate(165%); -webkit-filter: saturate(165%); } /*для hover-эффекта*/ .efsatut2 img{ transition: all 0.6s ease 0s; } .efsatut2:hover img{ filter: saturate(165%); -webkit-filter: saturate(165%); transition: all 0.6s ease 0s; }
Фильтр сепия
Имитация эффекта старинных фотографий (слегка коричневый оттенок). Таким образом достигается ретро стиль изображения, который пользуется особой популярностью. Фильтр сепия регулируется от 0% (исходное положение) до 100%.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efsepiaa1 img{ filter: sepia(100%); -webkit-filter: sepia(100%); } /*для hover-эффекта*/ .efsepiaa2 img{ transition: all 0.6s ease 0s; } .efsepiaa2:hover img{ filter: sepia(100%); -webkit-filter: sepia(100%); transition: all 0.6s ease 0s; }
Фильтр прозрачность
Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efopaty1 img{ filter: opacity(50%); -webkit-filter: opacity(50%); } /*для hover-эффекта*/ .efopaty2 img{ transition: all 0.6s ease 0s; } .efopaty2:hover img{ filter: opacity(50%); -webkit-filter: opacity(50%); transition: all 0.6s ease 0s; }
Фильтр ссылка
Создается собственный фильтр на основе SVG элементов с определенным идентификатором, который впоследствии можно используется в CSS через фильтр ссылку. Эффекты могут очень сильно отличаться от стандартных фильтров начиная от маски-наложения до банальной прозрачности.
Генератор CSS filters
Уже давно повелось создавать генераторы различных CSS свойств. , и многое-многое другое. Они служат как инструмент, упрощающий работу. А для начинающих вебмастеров могут нести двойную пользу. Ими очень легко пользоваться: перемещаете ползунки, и сразу же виден результат. А по окончании остается лишь скопировать сгенерированный код. То же и с генераторами 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 и ниже.
| 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, |
Результат будет похожим.
Вывод
Для поддержки данного эффекта всеми браузерами, необходимо комбинировать все способы. Данный код будет работать в 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 | Наследует значение свойства от родительского элемента. |
