Mix blend mode не работает

mix-blend-mode

Определяет режим наложения исходного цвета на фоновый цвет или фоновое изображение.

Краткая информация

Значение по умолчанию	normal
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

Обозначения

Описание	Пример
Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[, ]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

Значения, в целом, совпадают с режимами графических редакторов. Ниже описания взяты из руководства Adobe Photoshop.

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

• Основной цвет — исходный цвет.
• Совмещённый цвет — накладываемый цвет.
• Результирующий цвет — цвет, полученный в результате наложения.

normal Обычный. Не используется смешивание цветов. Режим по умолчанию. multiply Умножение. В этом режиме значение основного цвета умножается на значение совмещённого цвета. Результирующий цвет всегда представляет собой более тёмный цвет. В результате умножения значения любого цвета на значение чёрного цвета вырабатывается чёрный цвет. В результате умножения значения любого цвета на значение белого цвета цвет остаётся неизменным. screen Осветление. В этом режиме перемножаются обратные значения основного и совмещённого цвета. В качестве результирующего цвета всегда применяется более светлый цвет. При осветлении с применением чёрного цвета, цвет остаётся неизменным. При перекрытии с применением белого цвета, цвет становится белым. Полученный эффект аналогичен наложению друг на друга изображений многочисленных фотографических слайдов с помощью проектора. overlay Перекрытие. В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пиксели, оставляя неизменными светлые и тёмные участки основного цвета. Базовый цвет не заменяется, а смешивается с совмещённым цветом, что позволяет отразить наличие светлых или тёмных участков первоначального цвета. darken Замена тёмным. В качестве результирующего выбирается основной или совмещённый цвет, в зависимости от того, какой из них темнее. Пиксели с цветом, более светлым по сравнению с совмещённым, заменяются, а пиксели с цветом, более тёмным по сравнению с совмещённым, остаются неизменными. lighten Замена светлым. В качестве результирующего цвета выбирается основной или совмещённый цвет, в зависимости от того, какой из них светлее. Пиксели с более тёмным цветом по сравнению с совмещённым цветом заменяются, а пиксели с более светлым цветом по сравнению с совмещённым цветом остаются неизменными. color-dodge Осветление основы. Основной цвет заменяется более ярким для отражения совмещённого цвета в результате уменьшения контраста между двумя цветами. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений. color-burn Затемнение основы. Основной цвет заменяется более тёмным для отражения совмещённого цвета в результате увеличения контраста между двумя цветами. Смешивание с белым цветом не приводит к появлению каких-либо изменений. hard-light Направленный свет. В этом режиме цвета умножаются или осветляются в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения резким светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Этот эффект может применяться для добавления светлых участков к изображению. Если совмещённый цвет (источник света) является более тёмным, чем 50% серого, то изображение становится темнее, как после умножения. Этот эффект может применяться для добавления тёмных участков к изображению. Наложение чисто-чёрного или чисто-белого цвета приводит к получению чисто-чёрного или чисто-белого цвета. soft-light Рассеянный свет. В этом режиме цвета становятся более тёмными или более светлыми в зависимости от совмещённого цвета. Полученный эффект аналогичен освещению изображения расплывчатым светом прожектора. Если совмещённый цвет (источник света) является более светлым, чем 50% серого, то изображение становится светлее, как после осветления. Если совмещённый цвет является более тёмным, чем 50% серого, изображение становится темнее, как после затемнения. Наложение чисто-чёрного или чисто-белого цвета создаёт отчётливые, более тёмные или более светлые зоны, но чистого чёрного или белого цвета не получится. difference Разница. В этом режиме вычитается либо совмещённый цвет из основного цвета, либо основной цвет из совмещённого цвета в зависимости от того, какой цвет имеет большее значение яркости. Смешивание с белым цветом приводит к инвертированию значений основного цвета, смешивание с чёрным цветом не влечёт за собой каких-либо изменений. exclusion Исключение. В этом режиме создается эффект, аналогичный создаваемому в режиме «Разница», но характеризующийся более низким контрастом. Смешивание с белым цветом приводит к инвертированию значений основного цвета. Смешивание с чёрным цветом не приводит к появлению каких-либо изменений. hue Тон. В этом режиме создаётся результирующий цвет с яркостью и насыщенностью основного цвета и цветовым тоном совмещённого цвета. saturation Насыщенность. В этом режиме создаётся результирующий цвет с яркостью и цветовым тоном основного цвета и насыщенностью совмещённого цвета. color Цвет. Создаётся результирующий цвет с яркостью основного цвета и с цветовым тоном и насыщенностью совмещённого цвета. Этот режим сохраняет уровни серого в изображении и может применяться для раскрашивания монохромных изображений и добавления оттенков к цветным изображениям. luminosity Яркость. В этом режиме создаётся результирующий цвет с цветовым тоном и насыщенностью основного цвета и яркостью совмещённого цвета. Этот режим создаёт эффект инверсии цвета.

Источник

CSS Blend Mode not working

I would like to play with the CSS blend mode property but it seems like nothing is happening when I apply the rules.

Am I doing something wrong? I have applied the isolation rule to the parent and the mix-blend-mode to the element I want to play with.

Here’s the code and a codepen example.

2 Answers 2

The code you have written is working, but the effects don’t seem so obvious due to the color you have chosen. The mix-blend-mode property you have used achieves best results when used with a background image. You can combine the background image and background color property. An example would be:

You can also check our an interesting article here that might help further explain the property.

Blend modes are typically used with background images. The results are similar to the blend modes in Photoshop where you would have a layer with solid color over a photo layer, then change blend mode to something like ‘screen’ or ‘darken’ etc.

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Улучшенные эффекты с режимом смешивания фоновых слоев в CSS

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

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

Вот эти свойства:

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

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

Комбинирование CSS-градиентов при помощи background-blend-mode

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

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

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

Спектральный фон

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

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

Клетчатый фон

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

Фон в кружочек

Вот еще один фон, теперь с использованием радиального градиента:

Больше фоновых рисунков

С помощью Yoksel и Una Kravets я подготовил коллекцию из 24 шаблонов, сделанных с помощью смешивания, которые сделают ваш сайт быстрее и привлекательнее.

Фотоэффекты с помощью background-blend-mode

Хотя background-image позволяет установить несколько градиентов для элемента, фокус в том, что таким же образом мы можем установить несколько фоновых изображений с использованием конструкции url() . Когда мы совмещаем это с background-blend-mode и свойствами вроде filter , может получиться что-нибудь действительно интересное.

Эффект карандашного наброска

Мы можем использовать CSS, чтобы сделать фотографию слева похожей на карандашный набросок. Нам не понадобятся Photoshop, HTML5 canvas, WebGL, библиотеки Javascript. Пять свойств CSS – все, что потребуется.

Хотя мы можем использовать другие блочные элементы, такие как body , section , figure , для начала используем такой HTML:

Давайте начнем моделирование. Заменим chapel.jpg на url картинки, которую вы используете. Мы дважды установим фоновое изображение и сохраним его фоновый размер.

Ниже на первом квадрате результат нашего первого шага:

Теперь добавим режим смешивания:

О нет, куда все делось? У нас получился совершенно черный квадрат. Режим вычитания для смешивания берет два фона и отнимает пиксель за пикселем более темный цвет одного фона из более светлого цвета другого фона.

Если вы запутались в том, что происходит, давайте посмотрим, что случится, когда мы немного сместим два фона с помощью background-position и calc() .

Используя запятую, мы устанавливаем две позиции фона, каждая из которых соответствует одной копии фонового изображения. Первое изображение мы перемещаемся от центра по оси Х влево на один пиксель и от центра по оси Y вверх на пиксель. Для второй копии фонового изображения мы делаем прямо противоположное, перемещая ее вниз и вправо.

У нас получились два фоновых изображения, которые слегка смещены, но вся картина по-прежнему центрирована в нашем элементе. Теперь, когда режим вычитания обнаруживает разницу между двумя изображениями, видны края на фотографии. Здорово, не так ли?

Наконец, мы будем использовать свойство filter , чтобы инвертировать фотографию и перевести ее в оттенки серого.

Для этой конкретной фотографии мы также повысим яркость, которая имеет вторичный эффект относительно повышения контрастности линий.

Вот окончательный фрагмент CSS для этого эффекта:

Эффект школьной доски

Мы можем воссоздать эффект школьной доски, выполнив шаги для эффекта карандашного наброска и исключив функцию invert(1) на заключительном этапе.

Эффект прибора ночного видения

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

Есть три части нашего фона, которые мы будем смешивать вместе с помощью режима overlay . Этот режим смешивания осветляет и затемняет фон, и работает как комбинация двух других режимов смешивания – multiply и screen .

Сначала мы установим фоновое изображение, на этот раз одно.

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

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

И, в итоге, вот полный фрагмент CSS, используемый для этого эффекта:

Больше фотоэффектов

Я сделал галерею из 20 картинок с CSS-эффектами, которые вы можете использовать для своих сайтов.

Поддержка браузера и постепенная деградация

Хорошие новости в том, что свойство background-blend-mode полностью поддерживается в Firefox, Chrome и Opera.

Отчасти хорошей новостью является то, что она имеет достаточную поддержку в Safari в части тех эффектов, которые мы рассмотрели здесь, но Safari в настоящее время не поддерживает saturation , hue , color и luminosity .

Плохая новость заключается в том, что Internet Explorer и IE Edge вообще не поддерживают свойства смешивания CSS.

Это значит, что мы должны учитывать наличие браузеров, до сих пор не поддерживающих background-blend-mode . Замечательное правило CSS @supports делает это довольно простым. Вот два примера.

Для первого примера мы возьмем наш спектральный фоновый градиент и предусмотрим резервные возможности на случай, если функция background-blend-mode не поддерживается. Мы используем для нашего примера background: gray в качестве резерва, но в этом месте можно использовать любой CSS.

А здесь эффект карандашного наброска с запасным вариантом. Мы проверяем два важных свойства, которые требуются для создания эффекта: filter и background-blend-mode . Если браузер пользователя не поддерживает их (или если браузер не поддерживает CSS @supports ), мы вернемся к оригинальной фотографии.

Источник