От автора: с SVG изображения могут стать какими угодно, так ведь? Спустя год совместной работы с дизайнерами и экспериментов с визуальными эффектами можно сказать, что у меня получилось. Быстрый поиск SVG на CodePen покажет вам результат моей работы. Тиснение, фигуры, спрайты, анимации и манипуляции с изображениями – с щепоткой SVG все лучше. Когда в том году в веб ворвался новый визуальный тренд, неудивительно, что SVG смог и его реализовать.
Искра тренда
Креативщики повсюда встречали новый 2016 год вспышкой техники колоризации, которая получила популярность благодаря сайту Spotify 2015 Year in Music (версия за последний год). В качестве отличительного признака бренда сайт представил смелые изображения с двумя оттенками.
Техника – это воспроизведение полутонов изображения путем наложения одного цвета (обычно черного) на другой. Другими словами, более темный тон будет отображаться в тенях изображения, а светлый тон – в светлых участках.
Эффекта дуплекс можно добиться в фотошопе через применение карты градиента (Layer > New Adjustment Layer > Gradient Map) двух цветов поверх изображения.
Кликните правой кнопкой мыши (или alt + click) на настраиваемом слое и создайте обтравочную маску для применения карты градиента чисто к слою изображения ниже, а не ко всем слоям.
Это необходимо, чтобы убрать элемент canvas, чтобы рассчитать цветовое сопоставление и нарисовать результат в DOM или использовать режимы смешивания CSS, чтобы приблизиться к желаемому эффекту. Благодаря свойствам SVG, мы можем создать эти настраиваемые слои, как в фотошопе, с помощью SVG фильтров.
Разбор SVG
Мы уже знаем, что SVG – царь векторной графики. Кроме того, для создания резких, гибких и маленьких изображений SVG поддерживает 20+ эффектов, с помощью которых можно применять размытие, менять форму и т.д. Для эффекта дуплекс мы будем использовать 2 фильтра для создания карты градиента.
feColorMatrix (необязательный)
Эффект feColorMatrix позволяет манипулировать цветами изображения по матрице rgba каналов. Una Kravets подробно разбирает манипуляции с feColorMatrix в этой статье. Крайне рекомендую к прочтению.
В зависимости от изображения, возможно, придется сбалансировать цвета, установив изображение в оттенки серого через цветовую матрицу. Для достижения желаемого эффекта оттенков серого каналы rgba можно настраивать по своему усмотрению.
|
1 2 3 4 5 6 |
<feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0" > </feColorMatrix> |
feComponentTransfer
Далее необходимо сопоставить два цвета с светлыми и темными участками серого изображения с помощью фильтра feComponentTransfer. У этого фильтра есть специальные атрибуты элементов, о которых стоит помнить.
Атрибут result не обязателен, но я люблю включать его для создания дополнительного контекста для каждого фильтра (и как полезная заметка для будущей ссылки).
Фильтр feComponent обрабатывает сопоставление цветов через функции передачи всех rgba компонентов, определенных как дочерние элементы родительского feComponentTransfer: feFuncR feFuncG feFuncB feFuncA. Эти rgba функции используются для вычисления значений двух цветов в карте градиента.
Пример:
На скриншоте выше карта градиента Peachy Pink использует цвет magenta (#bd0b91) со значениями R(189) G(11) B(145).
Разделите каждое RGB значение на 255, чтобы получить значения первого цвета в матрице. RGB значения второй колонки #fcbb0d (золотой). Точно так же, как в карте градиента в фотошопе, первый цвет (слева направо) накладывается на тени, а второй на светлые участки.
|
1 2 3 4 5 6 |
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> <feFuncR type="table" tableValues="(189/255) 0.9882352941"></feFuncR> <feFuncG type="table" tableValues="(11/255) 0.7333333333"></feFuncG> <feFuncB type="table" tableValues="(145/255) 0.05098039216"></feFuncB> <feFuncA type="table" tableValues="0 1"></feFuncA> </feComponentTransfer> |
Шаг 3: применение эффекта через CSS фильтр
CSS фильтр готов, теперь его можно применить к изображение через свойство CSS filter и установку функции фильтра url() в значение ID SVG фильтра.
Обратите внимание, что SVG с фильтром может быть просто скрытым элементом в HTML. В таком случае он загружается и готов к использованию, но пока что не отображается на экране.
|
1 2 3 |
background-image: url('path/to/img'); filter: url(/path/to/svg/duotone-filters.svg#duotone_peachypink); filter: url(#duotone_peachypink); |
Поддержка в браузерах
Возможно, вы думаете о поддержке этой техники. У SVG фильтров хорошая поддержка в браузерах.
Данные о поддержке взяты с Caniuse, где можно посмотреть все подробности. Число указывает на то, с какой версии браузера поддерживается функция.
CSS фильтры не так широко поддерживаются. Поэтому придется кое-где применить технику изящной деградации.
Данные о поддержке взяты с Caniuse, где можно посмотреть все подробности. Число указывает на то, с какой версии браузера поддерживается функция.
Например, IE не поддерживает функцию url() из CSS фильтров, а также CSS background-blend-modes – следующий лучший способ достижения дуплекс эффекта. Фолбек для IE может представлять собой абсолютно позиционированный градиент поверх изображения, имитирующий фильтр.
У меня возникали проблемы в Firefox с получением доступа к самому фильтру, основанному на пути для SVG фильтра, когда я впервые написал этот метод в проекте. Firefox работал только, если я ссылался по полному пути к SVG файлу, а не только по ID фильтра. Сейчас это уже неважно, но стоит знать.
Собираем все вместе
Полный пример фильтра:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<svg xmlns="//www.w3.org/2000/svg"> <filter id="duotone_peachypink"> <feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0" > </feColorMatrix> <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> <feFuncR type="table" tableValues="0.7411764706 0.9882352941"></feFuncR> <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG> <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB> <feFuncA type="table" tableValues="0 1"></feFuncA> </feComponentTransfer> </filter> </svg> |
Эффект на изображение:
Можете сами создать примеры, просто поиграйтесь с фильтрами в pen.
Автор: Lentie Ward
Источник: //css-tricks.com/
Редакция: Команда webformyself.
