Как использовать режимы наложения CSS

Режимы наложения CSS — это простой способ добавления эффектов изображения прямо в браузере.

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

Будут ли режимы наложения браузера полностью устранять необходимость в программном обеспечении для редактирования изображений? Не совсем и, конечно, еще не совсем. Но поддержка CSS и браузеров прошла долгий путь в поддержке новых способов редактирования изображений. Отсечение и маскирование CSS и SVG, режимы наложения, 3D-преобразование и многое другое, безусловно, могут снизить нашу зависимость от программного обеспечения для редактирования изображений. По мере того, как браузеры становятся все более изощренными, мы увидим гораздо больший потенциал и (будем надеяться) проводить меньше времени в Photoshop.

Режимы наложения CSS и режимы наложения CSS Mix

В этом руководстве будут рассмотрены режимы наложения CSS и их использование. Для начала есть несколько разных вариантов, о которых вам следует знать. Один — это эффект с background-blend-mode , а другой — с mix-blend-mode .

Используя background-blend-mode property , вы можете смешать фоновые слои (изображение или цвет) элемента. Режимы наложения определяются как значение и указывают, как смешивать или смешивать цвета фонового изображения с цветом или другими фоновыми изображениями за ним.

Что произойдет, если вы захотите выполнить смешивание, но не с фоновыми элементами? Элементы можно смешивать вместе с помощью свойства mix-blend-mode . Это свойство описывает, как должно происходить смешивание между элементами HTML, расположенными друг над другом. Элементы на перекрывающихся слоях будут смешиваться с элементами под ним. Это свойство будет влиять на любые изображения, текст, границы или заголовки.

Пример умножения в Adobe Photoshop

Взгляд на традиционный способ отображения режимов наложения в графическом редакторе дает нам представление о том, чего можно добиться с помощью режимов наложения CSS. Следующее фото было создано в Adobe Photoshop. Изображение находится на собственном фоновом слое с красным слоем выше. Был выбран режим наложения для красного слоя «Умножение». Как видите, есть красная накладка. Чтобы достичь этого эффекта, Adobe Photoshop берет цвета из слоя, к которому применено «Умножение», умножает цвета на слоях под ним, а затем делит их на 255, чтобы показать результат.

Тот же самый эффект может быть достигнут с помощью CSS, позволяющего быстрее настраивать и легко обновлять.

Базовый пример режима наложения CSS

Простой пример, чтобы увидеть, как работают режимы наложения, — это смешивание изображения с background-color . Сначала необходимо объявить путь URL к изображению, а затем указать цвет. После того, как они были определены, необходимо выбрать режим наложения. Здесь было выбрано «Умножение», чтобы показать, как этот режим наложения влияет на внешний вид background-image .

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

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

Умножение — очень популярный режим наложения, но есть и другие доступные параметры режима наложения: экран, наложение, затемнение, осветление, осветление цвета, затемнение цвета, жесткий свет, мягкий свет, разница, исключение, оттенок, насыщенность, цвет, яркость. Если указано «нормальное», это приведет к сбросу настроек. Вместо того, чтобы рассматривать детали каждого режима наложения один за другим, лучше всего поэкспериментировать с ними, чтобы определить, каким будет окончательный результат.

Режим наложения фона с двумя изображениями

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

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Градиент в фоновых режимах наложения

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

 .градиент на изображении {
 фон:
 линейный градиент (фиолетовый 0%, красный 80%),
 линейный градиент (вправо, фиолетовый 0%, желтый 100%), url ("image.jpg");
 background-blend-mode: экран, разница, осветление;
 } 

Вы также заметите, что в этом примере есть несколько режимов наложения фона. Если одного режима наложения недостаточно, можно использовать несколько.

Рабочие примеры можно найти в этом Codepen.

Примеры режимов наложения Mix

До этого момента основное внимание уделялось фону. Что, если другие элементы на странице захотят использовать режимы наложения? Это не проблема, и доступны те же типы режимов наложения.

В background-blend-modes все выглядит так же, за исключением начального, наследуемого и неустановленного.

• Initial: значение по умолчанию для свойства, которое не устанавливает режим наложения.
• Наследовать: наследует режим наложения от родительского элемента.
• Unset: удаляет режим наложения с элемента.

Базовый пример смешанного режима наложения с изоляцией

При работе с mix-blend-mode вы столкнетесь с необходимостью сделать некоторую изоляцию. Во-первых, важно знать, что возможно «наложение», и это полезно при работе с большим количеством слоев. Представьте стопку коробок. Каждая коробка отделена от группы. Внутри каждой коробки может быть несколько слоев предметов. Такой образ мышления поможет при определении того, что нужно изолировать.

Смешение текста и изображения с режимом смешивания

В этом примере div с классом img-wrap содержит изображение. Изображение имеет mix-blend-mode умножения. Таким образом, в основном изображение кажется падающим на задний план.

Чтобы предотвратить это, div img-wrap (также содержащий текст заголовка) должен быть новым набором сложенного содержимого, чтобы он был отделен от фона элемента body. Это делается с помощью свойства изоляции. Значение по умолчанию — auto, поэтому isolation: isolate; надо будет добавить.

Чтобы проверить это, закомментируйте свойство изоляции в div с классом .img-wrap и проверьте результат.

Вот HTML:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

Вот ССЦ. Обратите особое внимание на isolate на .img-wrap .

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

Рабочий пример можно найти на Codepen.

Вырезание текста с помощью Mix-blend-mode

Некоторые интересные текстовые эффекты можно создать с помощью смешанных режимов наложения. Есть простой способ вырезать текст. Фон скрыт заливкой на элементе h1 .

Вот HTML:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

Тот, что содержит <div> заполняется фоновым изображением леса.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

Заголовок внутри него имеет необязательный фоновый цвет. Заголовок имеет эффект прозрачности с полупрозрачным фоновым изображением с использованием mix-blend-mode умножения:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

Рабочий пример можно найти на Codepen.

Mix-blend-mode и SVG

Файлы SVG очень популярны в Интернете, и режимы наложения CSS также хорошо работают с ними. Формы можно легко нацелить, чтобы придать им желаемый режим наложения.

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

Вот код для создания группы кругов:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

Вот стили CSS:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

Этот пример можно найти на Codepen.

Браузерная поддержка режимов фонового наложения и смешанного режима

Поддержка браузера довольно хороша, но не совсем соответствует фоновому режиму наложения. Прежде чем приступить к разработке дизайна, использующего эту функцию, обязательно проверьте Могу ли я ее использовать. В настоящее время Edge и Safari не поддерживаются. Чтобы справиться с ограниченной поддержкой и в зависимости от того, какие браузеры должны поддерживаться, хорошим вариантом может быть запрос функции CSS. Если нет, лучше всего рассматривать «смешанные» изображения как улучшение (а не требование).

Браузерная поддержка немного лучше для режима смешивания. Хорошо знать о частичной поддержке. Например, Safari не поддерживает оттенок, насыщенность, цвет или яркость.

Лучший способ узнать, что можно создать с помощью режимов наложения, — это поэкспериментировать. Примеры, показанные здесь, только поцарапали поверхность. Удивительно, какую графику можно создать, используя режимы наложения. Это большой шаг вперед для того, что можно сделать в Интернете.

Подпитывайте свободу творчества с помощью WP Engine

WP Engine обеспечивает свободу творчества на WordPress. Продукты компании, самые быстрые среди всех поставщиков WordPress, обеспечивают 1,5 миллиона цифровых возможностей. Больше из 200 000 лучших сайтов в мире используют WP Engine для обеспечения своих цифровых возможностей, чем кто-либо другой в WordPress. Узнайте больше на wpengine.com или поговорите с представителем сегодня!