От автора: ваш браузер на данный момент может компоновать эффекты на изображениях множеством способов прямо налету, сохраняя вам время, затраченное на графический редактор. Вы можете имитировать эффекты тонирования и отображать одно изображение множеством разных способов, комбинируя слои градиентов и режимы наложения с помощью свойства background-blend-mode.
Мне понадобилось создать один из таких эффектов для сайта Palate Deck. Я поместил баннер на нескольких страницах и понял, что нужно заново открыть Photoshopи подкрасить и снизить контрастность изображения, чтобы поверх него хорошо был виден текст и другие изображения. Или… не нужен фотошоп?
Я проверил поддержку свойства background-blend-mode на caniuse и понял, что а) поддержка свойства почти универсальна и б) если сделать все по уму, можно создать хороший фолбэк. Так я нашел новый способ совмещения изображений.
Базовые настройки
Если вы хоть раз тонировали фото в редакторе, эффект будет очень похож. Берется фото, затем добавляется новый слой поверх него для тонирования, изменения контрастности или добавления градиента.
В отличие от редактора изображений, в данном случае в качестве корректирующего слоя выступает градиент, генерируемый браузером. Все это выполняется при помощи свойств, работающих с фоновыми изображениями и поддержкой нескольких фонов.
Постойте, ведь для этого есть свойство filter. Я бы также подумал. Однако в последнем рабочем проекте спецификации нет точного механизма тонирования изображений. Мы можем изменять контрастность, вращать оттенки по спектру (в реальном мире эта функция почти не применяется), но мы не можем тонировать изображение и применять тончайшие изменения к отдельным областям изображения.
Вот тут нам нужно перейти на новые слои и режимы наложения. Для начала нам потребуется заменить обычный тег img на свойство background-image. Контейнеру необходимо задать конкретные размеры (и медиа запросы, которые будут изменять его) и с помощью фонового изображения контролировать все.
|
1 2 3 4 5 6 |
.image { max-width: 100%; height: 200px; background-image: url(blog.jpg); background-size: cover; background-position: center; } |
Для упрощения кода описанные мной свойства в демо выше убраны. Не забудьте вернуть их на место. Чтобы вы поняли, какой уровень контроля у вас есть, я пошагово расскажу, как создать демо, которое было в начале статьи.
Тонирование
Мне нужно было затонировать изображение. Это можно легко сделать с помощью наложения однотонного градиента одного цвета на обеих контрольных точках. Для смешивания слоев я использовал значение color режимов наложения. Изменяя альфа канал контрольных точек градиента, можно менять степень тонирования изображения. Можно полностью закрыть изображение корректирующим слоем, а можно поставить прозрачность.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.image { /* setup properties omitted */ background-image: linear-gradient( to bottom, rgba(#33767e, 0.9) 0%, rgba(#33767e, 0.9) 100% ), url(beer.jpg); background-blend-mode: color, normal ; } |
Контраст
Дальше мне нужно было снизить контрастность, чтобы наложить текст. Я не буду показывать текст, сосредоточимся на контрасте.
В отличие от тонирования, свойство filter позволяет нам контролировать яркость и контраст. Свойство работает не так идеально, оно применяется только к верхнему слою в стеке, а значит, на него оказывают влияние все предыдущие эффекты. Мне нужно было изменить контрастность изображения и только потом тонировать его красным градиентом. Поэтому это свойство мне не подошло.
Нам придется сымитировать его с помощью нескольких градиентов. Я выбрал два: первый – белый слой с прозрачностью в 50% и режимом наложения lighten, второй – черный слой с прозрачностью в 50% и значением darken. Комбинация этих слоев осветляет тени и затемняет блики на изображении. Получается более серое изображение, что нам совершенно не важно, так как мы будем его тонировать.
|
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 |
.image { /* setup properties omitted */ background-image: linear-gradient( to bottom, rgba(#33767e, 0.9) 0%, rgba(#33767e, 0.9) 100% ), linear-gradient( to bottom, rgba(#fff, 0.5) 0%, rgba(#fff, 0.5) 100% ), linear-gradient( to bottom, rgba(#000, 0.5) 0%, rgba(#000, 0.5) 100% ), url(beer.jpg); background-blend-mode: color, lighten, darken, normal; ; } |
Градиенты
Мы получили именно то изображение, которое осталось тонировать красным градиентом. Последний слой имеет довольно большую непрозрачность и режим наложения normal, что еще сильнее снижает контраст.
|
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 27 28 29 30 31 32 |
.image { /* setup properties omitted */ background-image: linear-gradient( to bottom, rgba(#d43f2d, 0.9) 0%, rgba(#d43f2d, 0.1) 100% ), linear-gradient( to bottom, rgba(#33767e, 0.9) 0%, rgba(#33767e, 0.9) 100% ), linear-gradient( to bottom, rgba(#fff, 0.5) 0%, rgba(#fff, 0.5) 100% ), linear-gradient( to bottom, rgba(#000, 0.5) 0%, rgba(#000, 0.5) 100% ), url(beer.jpg); background-blend-mode: normal color, lighten, darken, normal; ; } |
Поддержка в браузерах
Большой недостаток данного способа заключается в том, что свойство background-blend-mode на данный момент вообще не поддерживается в IE/Edge. Safari не поддерживает значение color режима наложения. В этих браузерах не будет работать ни один пример.
Как я сказал выше, можно написать хороший фолбэк, но его нужно продумывать. Тут проблема кроется в нескольких слоях, так как без режимов наложения перед нами отображается просто мешанина. Результат не всегда будет такой, но все равно нужен фолбэк.
В качестве компромисса остается только тонировать фото и настраивать контрастность в редакторе и только потом применять градиент в браузере. Так я потерял пару плюсов, описанных ниже, но насколько я знаю, поддержка в Safari и Edge вопрос времени. Жду не дождусь использовать полную версию в ближайшем будущем.
Вы могли бы также использовать правило @supports для обеспечения более легкого стека фонов без режимов наложения для данных браузеров, и полнофункциональный стек для остальных браузеров. Поддержка у свойства background-blend-mode и правила @supports отличная. IEи Opera Mini просто пропустят блок стилей, а Edge и Safari не будут парсить этот код. Вам нужно будет обслуживать намного больше кода, но правило @supports позволяет не тонировать изображение заранее.
Способы применения
Насколько эта функция полезна? Зачем тонировать изображение в браузере, а не делать все заранее в редакторе?
Ответ кроется в гибкости. Вы не всегда сможете контролировать исходное изображение. Его может прислать пользователь, или оно может прийти через CDN. Возможно, вы захотите перепрофилировать изображение и поместить в другие области на сайте. Это просто еще один способ контролировать неконтролируемое при помощи манипулирования исходным изображением прямо в браузере.
Автор: Dave Shea
Источник: //daveshea.com/
Редакция: Команда webformyself.
