Создание дуплекс эффекта на изображениях с помощью SVG

Создание дуплекс эффекта на изображениях с помощью SVG

От автора: с SVG изображения могут стать какими угодно, так ведь? Спустя год совместной работы с дизайнерами и экспериментов с визуальными эффектами можно сказать, что у меня получилось. Быстрый поиск SVG на CodePen покажет вам результат моей работы. Тиснение, фигуры, спрайты, анимации и манипуляции с изображениями – с щепоткой SVG все лучше. Когда в том году в веб ворвался новый визуальный тренд, неудивительно, что SVG смог и его реализовать.

Искра тренда

Креативщики повсюда встречали новый 2016 год вспышкой техники колоризации, которая получила популярность благодаря сайту Spotify 2015 Year in Music (версия за последний год). В качестве отличительного признака бренда сайт представил смелые изображения с двумя оттенками.

Создание дуплекс эффекта на изображениях с помощью SVG

Техника – это воспроизведение полутонов изображения путем наложения одного цвета (обычно черного) на другой. Другими словами, более темный тон будет отображаться в тенях изображения, а светлый тон – в светлых участках.

Эффекта дуплекс можно добиться в фотошопе через применение карты градиента (Layer > New Adjustment Layer > Gradient Map) двух цветов поверх изображения.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Создание дуплекс эффекта на изображениях с помощью SVG

Создание дуплекс эффекта на изображениях с помощью SVG

Кликните правой кнопкой мыши (или alt + click) на настраиваемом слое и создайте обтравочную маску для применения карты градиента чисто к слою изображения ниже, а не ко всем слоям.

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

Разбор SVG

Мы уже знаем, что SVG – царь векторной графики. Кроме того, для создания резких, гибких и маленьких изображений SVG поддерживает 20+ эффектов, с помощью которых можно применять размытие, менять форму и т.д. Для эффекта дуплекс мы будем использовать 2 фильтра для создания карты градиента.

feColorMatrix (необязательный)

Эффект feColorMatrix позволяет манипулировать цветами изображения по матрице rgba каналов. Una Kravets подробно разбирает манипуляции с feColorMatrix в этой статье. Крайне рекомендую к прочтению.

В зависимости от изображения, возможно, придется сбалансировать цвета, установив изображение в оттенки серого через цветовую матрицу. Для достижения желаемого эффекта оттенков серого каналы rgba можно настраивать по своему усмотрению.

feComponentTransfer

Далее необходимо сопоставить два цвета с светлыми и темными участками серого изображения с помощью фильтра feComponentTransfer. У этого фильтра есть специальные атрибуты элементов, о которых стоит помнить.

Создание дуплекс эффекта на изображениях с помощью SVG

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

Фильтр feComponent обрабатывает сопоставление цветов через функции передачи всех rgba компонентов, определенных как дочерние элементы родительского feComponentTransfer: feFuncR feFuncG feFuncB feFuncA. Эти rgba функции используются для вычисления значений двух цветов в карте градиента.

Пример:

На скриншоте выше карта градиента Peachy Pink использует цвет magenta (#bd0b91) со значениями R(189) G(11) B(145).

Разделите каждое RGB значение на 255, чтобы получить значения первого цвета в матрице. RGB значения второй колонки #fcbb0d (золотой). Точно так же, как в карте градиента в фотошопе, первый цвет (слева направо) накладывается на тени, а второй на светлые участки.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Шаг 3: применение эффекта через CSS фильтр

CSS фильтр готов, теперь его можно применить к изображение через свойство CSS filter и установку функции фильтра url() в значение ID SVG фильтра.

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

Поддержка в браузерах

Возможно, вы думаете о поддержке этой техники. У SVG фильтров хорошая поддержка в браузерах.

Данные о поддержке взяты с Caniuse, где можно посмотреть все подробности. Число указывает на то, с какой версии браузера поддерживается функция.

Создание дуплекс эффекта на изображениях с помощью SVG

CSS фильтры не так широко поддерживаются. Поэтому придется кое-где применить технику изящной деградации.

Данные о поддержке взяты с Caniuse, где можно посмотреть все подробности. Число указывает на то, с какой версии браузера поддерживается функция.

Создание дуплекс эффекта на изображениях с помощью SVG

Например, IE не поддерживает функцию url() из CSS фильтров, а также CSS background-blend-modes – следующий лучший способ достижения дуплекс эффекта. Фолбек для IE может представлять собой абсолютно позиционированный градиент поверх изображения, имитирующий фильтр.

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

Собираем все вместе

Полный пример фильтра:

Эффект на изображение:

Создание дуплекс эффекта на изображениях с помощью SVG

Можете сами создать примеры, просто поиграйтесь с фильтрами в pen.

Автор: Lentie Ward

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree