Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Color
Webdesign

Режимы смешивания в CSS: Цветовая теория и практическое применение.

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

Вы можете быть знакомы с "режимами смешивания", если вы пользуетесь Photoshop; они позволяют совмещать слои разными способами и с ними интересно экспериментировать. Режимы смешивания в CSS полностью не поддерживаются на данный момент, но они на пути к этому.

В этом туториале мы разберем, как работают режимы смешивания и рассмотрим разные способы применения этих режимов посредством CSS.

Основы смешивания

Если вы никогда не работали с режимами смешивания, то на первый взгляд, то, как они работают может выглядеть немного неясным. Давайте рассмотрим подробнее.

Что же "режим смешивания" значит на самом деле?

Режимы смешивания доступны в дизайнерском ПО уже в течении многих лет, однако сама концепция этого понятия используется с незапамятных времён.

"Смешивание" буквально значит то, что мы берем два цвета и совмещаем их некоторым способом в один. Более точно выражаясь, мы берём две пиксельные карты и смешиваем их между собой.

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

An untreated image of a jellyfish
Оригинальная картинка с медузой
The same jellyfish with a solid orange layer placed over it
Та же картинка с непрозрачным оранжевым слоем-"исходником" наложенным поверх.
Heres the orange layer with the screen blending mode applied
Тот же исходник с режимом наложения "экран" ("screen")

Займёмся вычислениями

Если у вас действительно амбициозны, посмотрите официальную документацию W3C FX Task Force, в которой объясняются математические операции для каждого режима смешивания (наложения). Там приводятся формулы, которые использутся при вычислении результатов наложения.

Cm = B(Cb, Cs)
  • Здесь, Cm - результирующий цвет после наложения.
  • B обозначает функцию наложения.
  • Cb обозначает цвет фона.
  • И переменная  Cs для источника цвета.

Все цвета описываются в пределах шкалы 0-1, которая преобразуется в шкалу rgb с диапазоном 0-255.

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

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

Типы Режимов Наложения Доступные в CSS

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

Если, например, вы зададите, фон с несколькими изображениями (поддерживается во всех браузерах выше IE8), первое изображение будет обрабатываться как источник,  и другие изображения добавленные потом, будут обрабатываться как фоновые изображения, лежащие под первым.

При добавлении цвета (который должен быть последним в списке) создается в самом низу дополнительный слой. Цветной фон будет отрабатываться как фоновое изображения, а  изображение, как источник. Рассмотрим это на примере:

Это дает нам:

И далее мы можем добавить режим наложения, чтобы все смешать:

Здесь у нас два div-а, один используется без режима наложения, а другой с ним:

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

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

Ниже, вы можете найти интерактивную демонстрацию, для исследования эффектов данного наложения.

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

Давайте рассмотрим доступные режимы наложения, проверив используемые формулы, и применим их к красному кругу размещенному поверх нашей медузы.

Без использования наложения

Screen:

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

Screen blend mode
Режим наложения Screen

Darken:

Выбирает более темный из двух цветов.

Darken blend mode
Режим наложения Darken

Lighten:

Выбирает более светлый из двух цветов.

Lighten blend mode
Режим наложения Lighten

Color dodge:

Режим Color dodge высветляет фоновый цвет, отражая цвет источника.

Color dodge blend mode
Режим наложения Color dodge

Color burn:

Color burn затемняет фоновый цвет, увеличивая контраст между источником и фоном.

Color burn blend mode
Режим наложения Color burn

Hard light:

Использует умножения для светлых цветов и режим screen для темных. По сути, “hard light” является противоположностью режиму “overlay”, который идет у нас следующим.

Hard light blend mode
Режим наложения Hard light

Overlay:

Использует режим “screen” для светлых цветов и  “multiply” для темных; записывается так же как и “hard light”, только аргументы меняются местами.

Overlay blend mode
Режим наложения  Overlay

Soft light:

При этом режиме наложения используется умножение для темных областей и режим screen, для светлых (похож на screen).

В этом алгоритме мы видим вторичную функцию D, которая задается в множестве with на основе доли синего цвета в цвете. Конечный результат обычно намного более мягкий, чем «overlay».

Sof light blend mode
Режим наложения Soft light

Difference:

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

Difference blend mode
Режим наложения Difference

Exclusion:

Режим exclusion похож на “difference”, за исключением того, что подобные цвета приводят к более низкому контрасту между величинами (менее темным областям).

Exclusion blend mode
Режим наложения Exclusion

Не-разделяемые Режимы Наложения

При расчете не-разделяемых режимов наложения используются дополнительные функции, которые включаются в себя функцию ClipColor,  функцию SetLum, и функцию Sat .

Важное замечание: Safari не поддерживает режимы “hue”, “saturation”, “color”, или “luminosity” ни в режиме mix-blend-mode ни в режиме background-blend-mode.

Обратите внимание, что функции min, mid и max вычисляют минимальную, максимальную и среднюю величины соответственно. (Мid - это не среднее значение трех величин) Величины Cred, Cgreen и Cblue - обозначаются количество красного, зеленого и синего цвета представленное в цвете С.

Разобравшись с этими определениями, мы теперь можем взглянуть на неразделяемые режимы наложения.

Hue:

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

Hue blend mode
Режим наложения Hue (оттенок)

Saturation:

Этот режим делает то же самое, что и режим hue-«оттенок», но вместо этого применяет насыщенность переднего плана к оттенку и яркости фона.

Saturation blend mode
Режим наложения Saturation (Насыщенность)

Color:

Применяет оттенок и насыщенность переднего плана к яркости фона.

Color blend mode
Режим наложения Color (цвет)

Luminosity:

Этот режим применяет яркость слоя с источником к оттенку и насыщенности фонового слоя.

Luminosity blend mode
Режим наложения Luminosity

Заключение

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

Что вы будете делать, если браузеры будут развивать возможности использования режимов наложения?

Ссылки по теме

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.