До недавнего времени создание художественных эффектов в веб-графике можно было выполнять только с помощью сложных графических редакторов, таких как Photoshop или GIMP. Как здорово было бы смешать два или более цветов фона или два изображения в одном новом произведении цифрового искусства прямо из вашего CSS?
Это именно то, что вы можете сделать со свойствами CSS3 background-blend-mode и mix-blend-mode . В этой статье я расскажу о возможностях свойства mix-blend-mode и о том, как вы можете использовать эти возможности в своих проектах.
Но сначала давайте более подробно рассмотрим режимы наложения.
Какие режимы смешивания?
Режимы смешивания вступают в игру при компоновке графических элементов. Композиция — это просто техническое слово для наложения двух или более изображений, чтобы объединить их в одно изображение. Режим наложения слоя определяет, как пиксели на этом слое взаимодействуют с видимыми пикселями на слоях под ним.
При объединении двух элементов нижний называется местом назначения, а верхний — источником . Перекрывающееся содержимое позади верхнего элемента — это место, где происходит смешивание, и называется фоном .
Режимы наложения , такие как наложение , умножение , экран и т. Д., Дают разные результаты в соответствии с некоторой математической формулой, которую нам не нужно осваивать для создания визуально интересных составных элементов. Если вы хотите глубже погрузиться в то, как работает каждый режим наложения, вам обязательно нужно прочитать настоящее Руководство по режимам наложения Photoshop от Pye.
Простым режимом наложения, доступным для чистого CSS, является свойство непрозрачности : полная непрозрачность в верхнем элементе скрывает перекрывающиеся области нижнего элемента; Менее полной непрозрачности показывает элемент ниже.
Это может привести к приятным результатам, но не настолько сложным, как режимы наложения, подобные Photoshop, — пока не появятся спецификации W3C Compositing and Blending .
Эта спецификация вводит три свойства: background-blend-mode , mix-blend-mode и изоляция и делает возможным использование шестнадцати CSS-режимов смешивания .
Значение режима смешивания по умолчанию — normal , которое не применяет смешивание. Если вы хотите смешать только фоновые цвета или фоновые изображения, попробуйте свойство background-blend-mode . Чтобы узнать несколько хитрых уловок об этом свойстве, перейдите к разделу «Использование нескольких режимов смешивания » Робина Рендла.
Давайте теперь посмотрим на свойство mix-blend-mode и как свойство isolation может помочь при смешивании HTML-элементов.
Свойство mix-blend-mode
Интересное свойство CSS3 mix-blend-mode заключается в том, что вы можете быстро смешивать изображения, включая изображения SVG, а также другие элементы HTML.
Как применить смешивание к SVG
Вот как применить режим смешивания различий к базовой графике SVG.
HTML:
<svg width="467" height="462"> <rect x="80" y="60" width="250" height="250" rx="1" fill="pink" /> <rect x="140" y="120" width="250" height="250" rx="80" fill="blue" /> <rect x="180" y="180" width="250" height="250" rx="1" fill="turquoise" /> </svg>
CSS:
rect { mix-blend-mode: difference; }
Как выглядит графика SVG без применения режима наложения:
… И как это выглядит с примененным режимом смешивания difference :
Вот демонстрация CodePen:
Как смешивать элементы HTML
Смешивание двух или более элементов HTML может привести к тонким художественным результатам. Например, наложение этого изображения городского пейзажа (источник):
… Поверх этого морского изображения (место назначения / фон):
… При применении режима наложения hard-light к источнику и режима наложения difference к месту назначения достигается следующий результат:
Вот CSS, который выполняет смешивание:
/* destination/backdrop image */ .box img { mix-blend-mode: multiply; } /* source image */ .box .top-img { mix-blend-mode: difference; }
При использовании этого метода убедитесь, что края смешанного изображения не просвечивают, чтобы испортить эффект.
Вы можете создавать изобретательные визуальные эффекты, смешивая текст с изображениями. Мгновенно текст приобретает текстуру и индивидуальность. В качестве примера того, как это сделать с помощью свойства CSS mix-blend-mode , приведен предыдущий пример с текстом, наложенным поверх сюрреалистического водянистого городского пейзажа:
Текст смешивается на изображениях с помощью этого фрагмента CSS:
.box h1 { mix-blend-mode: overlay; }
Посетите живую демонстрацию и поэкспериментируйте с различными режимами наложения:
Когда изоляция вступает в игру
Могут быть случаи, когда вы получаете привлекательный визуальный эффект, который сочетает в себе изображения, цвета и текст, но фон того, что скрывается за смешанными элементами, портит весь ваш дизайн.
Это происходит потому, что свойство mix-blend-mode смешивается с каждым визуальным элементом, размещенным под ним. Вот наглядный пример.
Допустим, у вас есть HTML-структура, подобная этой:
<body> <div> <img src="path/image.jpg" alt="example"> <h1>City</h1> </div> </body>
Элемент img и h1 вложен в элемент div , содержащийся внутри body .
Затем в вашем CSS-документе примените фоновое изображение к body и свойство mix-blend-mode к изображению и заголовку, например:
body { background: url(path/pattern.png); } div img { mix-blend-mode: multiply; } div h1 { mix-blend-mode: overlay; }
В зависимости от фонового изображения (у меня определенно громкое) и выбранных вами цветов и режима наложения, вы можете получить результат, подобный следующему:
Тем не менее, то, что вы действительно ищете, — это нечто более близкое к этому:
Ваша цель состоит в том, чтобы текст и изображение хорошо сочетались друг с другом, но без какого-либо вмешательства со стороны фона страницы. Вот как вы можете это сделать.
Хитрость заключается в понимании концепции стека контекста . Думайте о сложении контекстов с точки зрения комода. Каждый ящик автономен и отделен от других ящиков. Внутри каждого ящика размещены слои разных предметов.
В приведенном выше примере div содержащий изображение и заголовок, находится в том же контексте стека, что и элемент body . Чтобы не допустить смешивания фона страницы, правильный шаг — отсоединить элемент div от body . Вы делаете это путем создания нового стекового контекста на div который, подобно автономному ящику, будет отделять свои элементы от их окружения.
Вы можете выполнять эту работу по- разному , но CSS предлагает удобное свойство isolation только для этого. Значением по умолчанию является auto . Использование значения isolate вместо этого создает новый контекст стека.
Попробуйте закомментировать свойство isolation элемента div в демоверсии и проверить результат самостоятельно: