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

  • CSS
  • 9,390
  • 0
  • 0
  • 0
  • 2 года назад

Что же такое режимы наложения

Если вам доводилось сталкиваться с программами для фотомонтажа (Adobe Photoshop, Pixelmator, GIMP), то вы, наверняка, знакомы с ними. Как можно понять из названия, режимы наложения определяют, как одно изображение накладывается на другое. В зависимости от выбранного режима, вы получите разный результат.

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

Как работает наложение цветов

Смысл этого функционала заключается в том, чтобы высчитать окончательный цвет накладывающихся элементов. По сути это математическая функция, вычисляющая конкретный цвет, исходя из двух входных цветов. То есть она принимает два RGBA цвета со значением всех каналов, например, в диапазоне от 0 до 1, и выдает значения всех каналов для выходного пикселя. В спецификации можно найти точную формулу расчета. Пока остановимся на режимах доступных нам в CSS.

Режимы наложения

Обычный (Normal)

В этом режиме мы получим изображение без изменений.

Умножение (Multiply)

Как можно понять из названия, выходное значение цвета - результат умножения двух цветов. Как правило, в итоге мы получаем затемнение.

Экранирование (Screen)

Противоположность умножению. В этом режиме значения цветов сначала инвертируются, потом перемножаются, а результат снова инвертируется.

Наложение (Overlay)

В этом режиме к более светлым пикселям применяется режим "Экранирование", а к темным - умножение. В результате светлые пиксели становятся еще светлее, а темные - темнее.

Затемнение (Darken)

Здесь выбирается наиболее темное значение из двух.

Осветление (Lighten)

Противоположность предыдущему. Более светлое значение является основным.

Цветовое осветление (Color-Dodge)

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

Цветовое затемнение (Color-Burn)

Затемняет задний фон и увеличивает контрастностью между исходным и наложенным цветом.

Жесткий свет (Hard-Light)

Противоположность наложению. Применяет умножения к светлым пикселям, и экранирование к темным.

Мягкий свет (Soft-Light)

Применяет умножение к темным цветам и экранирование к светлым. Похож на наложение, но работает немного по-другому.

Оттенок (Hue)

Этот режим применяет насыщение и яркость наложенного изображения, но с оттенком исходного цвета.

Насыщение (Saturation)

На выходе получаем цвет с насыщенностью исходного цвета, оттенком и яркостью наложенного цвета.

Цвет (Color)

Результатом работы этого режим является цвет с оттенком и насыщенностью исходного цвета и яркостью наложенного.

Яркость света (Luminosity)

Выходное изображение получает освещенность исходного цвета и результат смешения оттенка и насыщенности наложенного цвета.

Разница (Difference)

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

Исключение (Exclusion)

Этот режим генерирует изображение с меньшим контрастом в отличие от режима "Разница".

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

  1. Затемнение: затемнение, умножение, цветовое затемнение. Все эти фильтры затемняют изображение по-своему.
  2. Осветление: осветление, экранирование и цветовое осветление. Все они выдают изображение более светлое, чем исходник.
  3. Контраст: наложение, мягкий свет, жесткий свет. Увеличивают контрастность изображения.
  4. Сравнение: разница и исключение попадают в эту категорию.
  5. Компонент: оттенок, насыщенность, цвет и яркость света. Все остальные режимы работают независимо от каналов цвета, а эти фильтры выделяют один компонент из исходного цвета и смешивают его с другими компонентами как исходного, так и наложенного цвета.

Использование mix-blend-mode

Свойство mix-blend-mode указывает режим наложения исходного изображения с наложенным. В качестве фонового изображения может выступать любой элемент, расположенный под исходным элементом. (Например: заголовок может быть исходным элементом, а его div контейнер - фоном).

Пример использования:

mix-blend-mode: difference

или так

mix-blend-mode: overlay

Это свойство применимо ко всем элементам. Указав его, элемент будет смешивать свои цвета со всеми накладывающимися элементами. На этой странице{:target="_blank"} можете посмотреть примеры результата.

Применение свойства isolation

Как уже говорилось при указании свойства mix-blend-mode цвета элемента накладываются на другие элементы. Но как же быть, если надо ограничить круг накладывающихся элементов? Такого эффекта можно добиться посредством свойства isolation, то есть изолировать элемент. Например:

div {
    isolation: isolate;
}

В таком случае создается контекст, в пределах которого элементы накладываются друг на друга. Пример показывает использование свойств mix-blend-mode и isolate. Мы применили isolation к div содержащему изображение. Если бы мы не применили свойство isolation, то он смешался бы со слоем, находящимся под изображением. Выделив checkbox вы увидите разницу.

Применение свойства background-blend-mode

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

Пример:

background-image: url(images/sample.png);
background-color: red;
background-blend-mode: multiply;

При использовании нескольких фоновых изображений можно к обоим применить разные значения режима.

Например:

background-image: url(images/sample1.png), url(images/sample2.png);
background-color: blue;
background-blend-mode: screen, overlay;

В приведенном примере к изображению sample1.png будет применен режим screen, а к sample2.png - overlay.

Сочетание режимов наложения с другими технологиями

Градиент

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

По ссылке{:target="_blank"} можно увидеть рабочий пример. В нем добавлен радиальный градиент от прозрачного к черному. А сверху находится изображение с методом наложения "Умножение". При наведении мыши изменяем mix-blend-mode на normal, чтобы убрать эффект.

Маски, анимация и фильтры

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

Режимы смешивания отлично работают с анимацией, хотя само по себе это свойство не поддаётся анимации. В примере{:target="_blank"} показан вариант использования этих свойств. Обратите внимание, мы использовали отдельные значения mix-blend-mode, чтобы смешать и текст, и изображение. Фильтры и режимы смешивания также допускается накладывать поверх друг друга.

Видео

Хотя в этой статье в основном мы обсуждаем изображения, нам ничего не мешает применять режимы наложения к видео{:target="_blank"}. Добавив сверху текст или изображения можно получить довольно интересные эффекты.

Режимы наложения на canvas

Режимы наложения можно применять к элементу canvas. Достаточно назначить свойству global CompositeOperation для контекста canvas 2d{:target="_blank"} значение желаемого режима.

В большинстве случаев вам потребуется и в дальнейшем изменять изображение, например его прозрачность, что может быть достигнуто при помощи свойства globalAlpha.

Пример:

var canvas = document.querySelector('canvas');
var context = getContext('2d');
// Everything drawn on this context will now have
// a "screen" blend mode applied to it.
context.globalCompositeOperation = 'screen';
// Drawn elements will have an alpha channel of 0.7
context.globalAlpha = 0.7;

Я создал несколько примеров{:target="_blank"} использования режимов наложения на canvas. А в этой статье{:target="_blank"} от Adobe вы найдете дополнительную информацию на эту тему.

Режимы наложения для SVG

Допускается применения режимов наложения цвета для SVG документов через CSS.

<svg xmlns="http://www.w3.org/2000/svg">
       <style>
           rect {
                mix-blend-mode: multiply;
           }
       </style>
       <rect x="10" y="10" width="100" height="100" rx="15" ry="15" fill="#ff0000"/>
       <rect x="40" y="40" width="100" height="100" rx="15" ry="15" fill="green"/>
</svg>

Конечно, вы можете использовать поля feImage и feBlend, но предпочтительнее это делать в CSS.

Поддержка браузерами

На данный момент наиболее полной поддержкой могут похвастаться браузеры на основе движка chromium. Для включения поддержка режимов наложения в opera, наберите в адресной строке opera:flags и активируйте опцию “Enable expermental Web Platform features”. Для хрома процедура активации идентична, только находится по адресу chrome://flags.

На данный момент Firefox не поддерживает свойство isolation, но можно использовать другие из about:config. Safari и Internet Explorer не поддерживают вышеперечисленные режимы.

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

Определяем, поддерживает ли браузер режимы наложения цвета

На данном этапе развития технологии, очень важно сначала определить поддерживает ли её браузер.

Приведу пример сниппета кода:

if ('CSS' in window && 'supports' in window.CSS) {
       var supportsMixBlendMode = window.CSS.supports('mix-blend-mode', 'multiply');
       var supportsBackgroundBlendMode = window.CSS.supports('background-blend-mode', 'multiply');
       var supportsIsolation = window.CSS.supports('isolation', 'isolate');
       // …
}

В результате мы получим true если браузер поддерживает технологию и false в противном случае. Хотя существует готовое решение на базе Modernizr:

var mixBlendModeSupport = Modernizr.testProp('mixBlendMode');
var backgroundBlendModeSupport = Modernizr.testProp('backgroundBlendMode');
var isolationSupport = Modernizr.testProp('isolation');

Мы так же получим true в случае поддержки браузером необходимой технологии и false в противном случае.

Также допустимо использование директивы @supports:

@supports(mix-blend-mode: screen) {
    /* ... */
}

Вот пример определения поддержки обоих технологий:

@supports((mix-blend-mode: screen) and (background-blend-mode: screen)) {
    /* ... */
}

Заключение

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

Комментарии

0