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

Когда речь идет о режимах наложения в CSS (CSS Blend Modes), то сначала в глазах людей проскакивает ужас… очередной. Но дело-то в том, что вся суматоха последнего времени вертится вокруг всего нескольких (трех, по факту) свойств CSS, которые получили поддержку в современных браузерах.

Это:

  • isolation – изолирует группы элементов от их фона (насыщенного) и смешивает фоновые цвета вместе.
  • mix-blend-mode – задает для выбранного элемента режим смешивания цветов со слоями под данным элементом.
  • background-blend-mode – задает режим наложения фонового изображения на фоновый цвет или изображения, находящиеся в фоне.

И кстати, работать они будут в последних версиях браузеров. Да и то, не во всех.

Несложно увидеть, что свойство background-blend-mode поддерживается наиболее широко, поэтому подробно и рассмотрим его и то, каким образом можно создать потрясающие и красивые фоны для сайта. Если когда-то кто-то скажет, что CSS может отчасти конкурировать с Photoshop – стоит этому поверить.

Градиенты

Градиенты – один из самых распространённых видов фонов для страниц сайтов, поэтому особое внимание уделим им. Для работы с ними в CSS есть свойство background и такие функции, как repeating-radial-gradient(), radial-gradient(), linear-gradient(), repeating-linear-gradient(). Все они имеют хорошую поддержку в браузерах, но удостовериться в поддержке нужных версий не бывает лишним.

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

Если же взять следующее свойство, а именно background-blend-mode, то  градиенты и фоны могут получиться гораздо более эффектными.

Триада

Попробуем смешать три цвета между собой, но таким образом, чтобы они плавно перетекали друг в друга. При этом все цвета обозначены своими «именами», а не шестнадцатеричным кодом.

 

Теперь, если подумать, то изображение в jpg формате с аналогичным градиентом весило бы до 200КБ, а то может и чуть больше. Но эффект CSS займет в памяти не более 200КБ, и это при том, что по HTTP не будет осуществляться лишних запросов.

Клетки

Представим, что обычный цветной градиент скучен, и мы хотим создать узор. Простенький и незатейливый. Например, полоски разного цвета пересекаются друг с другом и, соответственно, в местах соединения их цвет тоже меняется. Выглядеть все это будет так:

Конфетти

Не все любят строгие квадратики в различном проявлении, тем более в преддверии самого шумного и ажиотажного праздника. Что ж, немного фантазии, подбора цветов и вот оно - конфетти, или кружочки или… как вам больше нравится.

Наверняка понравились варианты, поэтому вот и еще одна большая подборка аналогичных фонов с кодом CSS.

Фотоэффекты

Но, как мы уже упоминали выше, работа с градиентами и создание  несложных рисунков с помощью CSS – дело, в общем-то, обыденное для многих программистов и веб-верстальщиков. Другое дело, когда речь заходит о создании сложных эффектов, которые обычно создаются в Photoshop с применением не одного фильтра, свойства, слоя и так далее.

Суть здесь в том, что background-image способен работать не только с градиентами, но и с изображениями, если известен сетевой путь к ним –  url, проще говоря. Добавим еще сюда свойства filter и background-blend-mode и получится весьма оригинальное сочетание.

Ночное видение

Одни из несложных и замысловатых эффектов night-vision. Его используют в веб-дизайне с разным вариантом тонирования, если можно так выразиться, но суть эффекта именно в том, что все изображение перекрашивается в оттенки одного цвета. Ночное видение принято использовать зеленым, но бывают и иные цвета. Мы будем использовать только CSS, без JavaScript, WebGL, HTML5 canvas и уж тем более без Photoshop.  Но при этом у нас будет минимум свойств CSS.

Вся работа эффекта разбита на три части, и соединяться они будут с помощью overlay (режим смешивания в Photoshop – Перекрытие). По факту он представляет собой нечто среднее и объединяющее Экран (screen) и Умножение (multiply), а потому фон затемнится и немного осветлится одновременно.

Сначала задаем фон.

 

Теперь нам нужен градиент и свойство background-blend-mode. Градиент будет радиальным от прозрачного к черному.

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

 

 CSS многогранен

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

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

Пополняя копилку

Есть 15 режимов смешивания, рекомендованные консорциумом W3C. Мы также отдельно рассказывали о режимах наложениях в Photoshop и о том, как их использовать.  Но то дело было в Photoshop, а сейчас нас интересует CSS. Поэтому мы подобрали ряд интересных и занятных примеров и вариаций, которые, наверняка, окажутся не лишними. Это винтажный эффект, эффект стереоизображения, виньетирование.

А также и большая коллекция фотоэффектов CSS от Bennett Feely.

Если есть проблемы с браузерами

Как становится видно, знания и умения Photoshop не будут лишними, чтобы понять, как работает отрисовка изображений в CSS.  Но не все версии браузеров способны обработать такие эффекты. Откроем примеры выше в браузере Edge и - увы, ничего не увидим, каким бы удобным на деле браузер не был. Тем не менее, background-blend-mode отлично работает в Opera, Chrome и Firefox. Почти хорошо он функционирует и в Safari, за исключением режимов наложения яркость (luminosity), цвет (color), цветовой тон (hue), насыщенность (saturation).

Если не известно наверняка, что ваша аудитория работает с достаточно передовыми технологиями браузера такие красоты и верстка могут оказаться сложными. Спросите себя, приемлемы ли для вас отказы в посещаемости ресурса большей части аудитории? Если нет, то необходимо найти обходной путь. Поэтому, при работе с эффектами CSS нужно изначально лишний раз перепроверить поддержки свойств  в браузерах и, возможно, не будет лишним обратиться к правилу @supports.

Посмотрим наглядно, как это работает с вариантом карандашного наброска. Фотография тигра имеет много темных оттенков, поэтому набросок получился тоже темноватым. Как в и случае работы с Photoshop потребуется подобрать исходное изображение или изменить параметры в коде CSS. Но в данном случае для нас важна поддержка двух свойств background-blend-mode и filter. Здесь важно отметить, что если свойства CSS не поддерживаются, а также не поддерживается @supports, то у пользователя на экране будет обычное изображение.

Несмотря на все эти недостатки, режимы смешивания CSS являются отличным дополнением к инструментарию любого дизайнера и веб-верстальщика. Мы можем добавить прозрачность, насыщенный и богатый цвет, обработку текстур для наших изображений с помощью CSS. И сделать это можно без потерь времени и достаточно гибко. Что уж говорить о той энергии, которая появляется, когда все это работает в браузере, и мы видим, что наш труд не пропал зря.

Завершающие мысли

Если вы, читатели, услышите, что CSS может создавать фотоэффекты и стать отчасти альтернативой Photoshop, то удивляться не стоит. Выше мы наглядно это продемонстрировали. Впрочем, полноценной заменой одно другому не станет никогда, они и не созданы для этого. Но тем не менее, зачастую куда проще действительно создать небольшие эффекты с помощью CSS, чем рисовать тяжеловесный файл jpg.

Отдельного внимания стоят и узоры, текстуры и градиенты. Некоторые градиенты действительно проще создать и подобрать в Photoshop, как отрисовать и бесшовные узоры. Но если дизайнер уже нарисовал все в редакторе, а весит это немало, но известны цвета и параметры, то почему бы эти данные не перенести в CSS и на их основе не написать код для отрисовки фона? При этом есть одно «НО». Мы не стали уделять этому внимание выше, но коротко скажем в конце. Это цветопередача в браузерах. Она разная. Даже если каждый браузер использует одну и ту же математику, вы можете обнаружить, что иногда результаты заметно отличаются.

Управление цветом является сложным миром и хотя W3C рекомендует дефолт (по умолчанию, стандарт) для цветового профиля – sRGB, поддержка от поставщиков является непоследовательной. Каждый браузер отображает цвет в соответствии со своими «прихотями». Например, Chrome отображает изображения в «unmanaged» цветовом пространстве по умолчанию, если изображение не помечено цветовым профилем. Firefox работает так же, но имеет и переключатель в настройках конфигурации, чтобы включить sRGB для неподписанных изображений. Между тем, Safari может быть очень похож на Photoshop, так как графический API компании Apple находится в тесной зависимости от Adobe PostScript. Соответственно, существуют различия и они видны на скриншоте выше.

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

Как вам материал?