mix-blend-mode в CSS


Содержание

Про CSS

Режимы наложения и их фоллбеки

Не так давно в Firefox 32 включили поддержку mix-blend-mode , a в Chrome 37 — CSS shapes, то есть возможность управлять формой, по которой текст будет обтекать элемент. Обе технологии выглядят очень интересно, так что я решила попробовать их в действии, заодно выяснив как будет выглядеть страница в браузерах, где они не поддерживаются.

В процессе написания статьи Safari обновился до версии 7.1, и в нем тоже появилась поддержка режимов наложения. Таким образом, режим наложения слоев фона имеет уже довольно неплохую поддержку браузерами, с наложением друг на друга элементов страницы дела пока обстоят похуже, но я уверена, что у них всё впереди. Также в Safari 7.1 стали доступны CSS shapes, хотя и с префиксом -webkit- .

По обеим темам уже были хорошие статьи на английском языке, например:

Для более глубокого изучения есть спецификации:

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

Для начала я открыла новый Хром и сделала такое:

See the Pen KCibG by yoksel (@yoksel) on CodePen.

В демо используются mix-blend-mode и shape-outside . Режим наложения mix-blend-mode: multiply; задан всему контейнеру с текстом и картинками, а shape-outside для каждой картинки свой.

Полноценно оно отображается только в Safari 7.1, он умеет и режимы смешивания, и CSS shapes, но формы пока работают с префиксом -webkit- .

Также оно будет работать в последних Хроме/Опере со включенными экспериментальными возможностями (они умеют CSS shapes, но mix-blend-mode пока что за флагом, и их надо включать отдельно).

Включить в Хроме: chrome://flags/#enable-experimental-web-platform-features

В Опере: opera://flags/#enable-experimental-web-platform-features

В Safari и Chrome/Opera с флагами демо выглядит вот так:

Чтобы увидеть неработающие формы, достаточно открыть демо в Firefox:

а неработающие режимы смешивания — Internet Explorer:

Если нужно, чтобы формы работали везде, можно воспользоваться полифилом: css-shapes-polyfill, но следует иметь в виду, что это может создать дополнительную нагрузку для браузера. При этом в браузерах без поддержки CSS-форм ничего особо не ломается — картинки просто обтекаются текстом не по кривой, а по прямоугольному контуру.

Firefox можно оставить как есть, но с IE надо что-то делать: белый фон у картинок и белый в тенях заголовка выглядят не очень. Самый простой вариант — добавить блоку с текстом белую подложку:

Очень хотелось воспользоваться @supports , чтобы убрать отступы в браузерах с поддержкой режимов наложения, но @supports не работает в Сафари.

Тогда мне пришло в голову, что можно сделать белые поля не создавая отступы, например, так:

В браузерах с поддержкой режимов наложения ничего не изменилось, а в IE появился белый фон:

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

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

В SVG-фильтрах есть режимы смешивания. Их меньше, чем в CSS, но среди них есть нужный нам multiply .

Было бы куда удобнее задавать режим наложения исходной картинки на нижележащие слои страницы, а не на картинку, заданную в фильтре (здесь это feImage ). Для этого в SVG предусмотрена возможность в качестве одного из источников фильтра задавать BackgroundImage — по смыслу это снимок экрана под областью действия фильтра. BackgroundImage позволил бы сделать фильтр гораздо короче:

К сожалению, на момент написания статьи BackgroundImage в фильтрах не работает.

Чтобы фильтры работали везде, картинки, к которым они применяются, тоже надо завернуть в SVG. Примерный код:

Для SVG-элементов обязательно надо задавать размеры, можно с помощью CSS.

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

SVG-фильтры для SVG элементов работают во всех современных браузерах, в IE начиная с версии. Фильтры были бы отличным решением, если бы не некоторые нюансы:

  1. Некоторые браузеры вообще не понимают SVG (IE8 и старше, например). Для них SVG-элементам нужно будет задать фоном растровые изображения.
  2. SVG-фильтры не работают в IE9. Его нужно будет как-то определить, чтобы задавать белую подложку для него и для более старых версий IE.
  3. При использовании фильтров фон под картинкой ресайзится вместе с картинкой. То есть картинка приклеивается к фону с применением заданного режима наложения, и дальнейшие манипуляции делаются уже с этой новой склейкой.
  4. При значительном изменении размеров картинки с фильтром между “плитками” фона могут появляться однопиксельные полосы.

Пример для проблем №3 и №4 (порастягивайте окно браузера):

На фонах с четким рисунком несовпадение и “размыливание” фона будет очень заметно.

Если исходное изображение имеет белые поля, можно попробовать использовать SVG-маску. Для этого делается копия картинки, где белые поля сделаны прозрачными или залиты черным, а часть картинки, которая должна быть показана — полностью белая. Картинка для рыцаря выглядит вот так:

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

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

Про CSS

Background-blend-mode

На этой неделе в Firefox 30 было включено по умолчанию свойство background-blend-mode . Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось.

Внимание: все демо в посте — действующие примеры без фолбеков. Для просмотра лучше всего воспользоваться последними версиями Chrome, Opera или Firefox.

Что делает это новое свойство и какие возможности оно нам дает?

background-blend-mode управляет режимами наложения слоев фона, заданного в CSS.

See the Pen gftIl by yoksel (@yoksel) on CodePen.

Наведите курсор на картинку, чтобы увидеть исходное изображение.

background-blend-mode аналогичен режимам наложения слоев в фотошопе, и список возможных значений свойства вам, скорее всего, покажется знакомым:


  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion
  • hue
  • saturation
  • color
  • luminosity

Как это работает?

Возьмем, к примеру, картинку с котиком и зададим её фоном:

Для наложения слоев обязательное условие, чтобы слоев было больше одного. В нашем случае первым слоем является цвет ( teal ).

Теперь можно добавить режим наложения, например:

See the Pen kGAsK by yoksel (@yoksel) on CodePen.

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

Слоев фона может быть больше двух, и для каждого слоя можно отдельно задавать режим наложения:

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

See the Pen mJohl by yoksel (@yoksel) on CodePen.

Как можно использовать background-blend-mode ?

Предположим, есть сайт в определенной цветовой гамме, и в дизайне нужно разместить несколько картинок:

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

Способ имеет свои преимущества:

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

А если потом изменится цветовая схема сайта — не нужно будет заново перекрашивать картинки под новую схему — всё произойдет само собой:

Илон Маск рекомендует:  Оптимизация приложений сbuilder в архитектуре клиентсервер

Правда, мне не удалось сделать плавную смену режимов наложения. Насколько я понимаю, они не анимируются. Но это можно обойти используя псевдоэлементы: через :before создается дублирующий слой с той же картинкой, и ему по наведению меняется прозрачность — это можно сделать плавно (пример справа):

See the Pen FCLHx by yoksel (@yoksel) on CodePen.

Ещё один способ покрасить картинку в дизайне — подложить полосатый градиент:

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

Интересно, что в некоторых режимах результат различается в зависимости от того, наложена ли картинка на цвет или цвет поверх картинки (слева картинка поверх цвета, справа наоборот):

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

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

Уже есть первая галерея с примерами: bennettfeely.com/gradients/. Ниже на странице можно найти JS-фолбек и взвешивание одних и тех же градиентов, сделанных на CSS или в виде изображений различных форматов. CSS, конечно, выигрывает.

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

Вдохновившись примерами из галереи, я решила посмотреть что ещё можно сделать. Одно из забавных открытий — шахматная доска:

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

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

Ещё несколько градиентов:

See the Pen Sunny by yoksel (@yoksel) on CodePen.

See the Pen Lightblue by yoksel (@yoksel) on CodePen.

See the Pen Water by yoksel (@yoksel) on CodePen.

See the Pen vbwKF by yoksel (@yoksel) on CodePen.

See the Pen Red by yoksel (@yoksel) on CodePen.

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

background-blend-mode выглядит очень привлекательно, позволяя добавить немного магии фотошопа в привычный CSS.

Свойство CSS mix-blend-mode

Свойство CSS mix-blend-mode элемента используется для определения смешивания фона элемента с родительским элементом.

Синтаксис:

Ценности:

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

mix-blend-mode

The mix-blend-mode property is used to specify the blend mode for blending an element with its backdrop.

A backdrop is the content behind the element—known as the source element—and is what the element is composited with. The destination element is the element that lies behind the source element, and which the source overlaps with. The backdrop is the area where the color blending is done between the source and the destination.

Image showing the area that defines an element’s backdrop. (Source)


The backdrop is the area where the color blending is done between the source and the destination.

The mix-blend-mode property can be used to mix together any element with its backdrop. For example, you can mix text with whatever (images, for example) it overlaps with, images with other images, a fixed header with the scrolling content of the page, etc.

Trivia & Notes

Blending elements is/can be restricted by any existing stacking contexts.

Blending and Stacking Contexts

There are 16 available blend modes in CSS. The default value is normal . When a value other than normal is specified on an element, this leads to the creation of a new stacking context on that element, forming a new group. This group must then be blended and composited with the stacking context that contains the element.

In addition to that, an element that has blending applied, must blend with all the underlying content of the stacking context that that element belongs to. It will not blend with contents outside that context.

This means that an element belonging to a stacking context is isolated from the rest of the content outside that stacking context. Therefore, unless the entire context (the context’s root element) is blended with an element behind it, the contents will not blend with the latter.

Any property that leads to the creation of a stacking context can hence affect blending. (See the examples section below for an example).

If you are not using any stacking-context-creating properties but you still want to isolate an element (or more), you can use the isolation property to do just that. refer to the property’s entry for more information.

The mix-blend-mode property is used to blend the colors of an element and its backdrop. If you want to blend an element’s background images together, you can use the background-blend-mode property.

Official Syntax

  • Syntax:
  • Initial: normal
  • Applies To: All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements.
  • Animatable: no
  • Values

    Examples

    The following example applies a mix blend mode to an h1 positioned on top of an image that is also mixed with the background color of the body:

    The result of the above example looks like so:

    Result of mixing together a piece of text with an image that is also mixed with the background color applied to the body.

    If we were to create a stacking context on the container which contains the image and text, this will prevent the image from being blended with the background color of the body.

    We can isolate the contents of the container by either using the opacity property with a value other than “1” (because it leads to the creation of a new stacking context), or we could use the isolation property. For now, let’s use the opacity property.

    The above example will then look like so:

    Result of mixing together a piece of text with an image that is also mixed with the background color applied to the body after isolating the image and text from the body.

    It goes without saying that you can also blend two images together. The result of blending an image with the image from the above examples looks like so:

    overlay blend mode.» w /> The result of mixing together two images using the overlay blend mode.

    You can also mix together pieces of text. For example, if you were to overlap two pieces of an h1 and then apply a mix blend mode value difference to the piece on top (the source), you could create something like:

    mix-blend-mode property.» w /> Result of blending two pieces of text with the mix-blend-mode property.

    You can find the live demos for all of the above examples in the Live Demo section below.

    Live Demo

    An interactive demo

    Even with the definition of each blend mode known, it is very hard (if not impossible) to predict how applying a certain blend mode will affect the blended elements. Picking a blend mode is usually a case of trial and error—you may keep changing modes until you are satisfied with the end result.

    For that reason, I have created an interactive demo that you can use to test the effect of different blend modes on a background image of your choice. You can also choose the background color. The demo is useful for testing the background-blend-mode property.

    That being said, you can also toggle an editable piece of text, and then apply a blend mode to blend the text with the image in its backdrop in the preview area. You can also choose the text’s color and background color.

    Screenshot of the interactive demo.

    You can play with the interactive demo here.

    Browser Support

    Blending of HTML/SVG elements

    Allows blending between arbitrary SVG and HTML elements

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

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


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

    Илон Маск рекомендует:  Что такое код int86x

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

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

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

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

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

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

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

    Оригинальная картинка с медузой Та же картинка с непрозрачным оранжевым слоем-«исходником» наложенным поверх. Тот же исходник с режимом наложения «экран» («screen»)

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

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

    • Здесь, 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

    Darken:

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

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

    Lighten:

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

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

    Color dodge:

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

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

    Color burn:

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

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


    Hard light:

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

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

    Overlay:

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

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

    Soft light:

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

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

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

    Difference:

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

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

    Exclusion:

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

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

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

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

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

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

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

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

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

    Saturation:

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

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

    Color:

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

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

    Luminosity:

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

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

    Заключение

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

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

    How to Display Text on Image With CSS3 mix-blend-mode

    Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip: text; property, however it’s still an experimental feature without sufficient browser support.

    The CSS alternative to show an image background behind a text is using the mix-blend-mode property. Blend modes for HTML elements are fairly supported across all modern desktop and mobile browsers with the exception of a few, such as Internet Explorer.

    In this post, we’re going to see how mix-blend-mode (two of its modes specifically) works, and how you can use it to display a text with image background in two use cases:

    1. when the background image can be seen through the text
    2. when the background image runs around the text

    See some examples in the demo below (images are from unsplash.com).

    The mix-blend-mode CSS property defines how the content and the backdrop of an HTML element should blend together colorwise.

    Have a look at the list of blending modes, out of which we’ll use multiply and screen in this post.

    First, let’s look into how these two specific blend modes work.

    How multiply & screen blend modes work

    Blending modes technically are functions that calculate a final color value using the color components of an element and its backdrop.


    The multiply blend mode

    In the multiply blend mode, the individual colors of the elements and their backdrops are multiplied, and the resulting color is applied to the final blended version.

    The multiply blend mode is calculated according to the following formula:

    where: Cb – Color component of the backdrop Cs – Color component of the source element B – Blending function

    When Cb and Cs are multiplied, the resulting color is a blend of these two color components, and is as dark as the darkest of the two colors.

    To create our text image background, we need to focus on the case when Cs (the color component of the source element) is either black or white.

    If Cs is black its value is 0 , the output color will also be black, because Cb × 0 = 0 . So, when the element is colored black, it doesn’t matter what color the backdrop is, all we can see after blending is black.

    If Cs is white its value is 1 , the output color is whatever Cb is, because Cb × 1 = Cb . So in this case we see the backdrop directly as it is.

    The screen blend mode

    The screen blend mode works similarly to the multiply blend mode, but with the opposite result. So, a black foreground shows the backdrop as it is, and a white foreground shows white with whatever backdrop.

    Илон Маск рекомендует:  Faq как определить, имеется ли в системе звуковая плата

    B(Cb, Cs) = Cb + Cs — (Cb × Cs)

    When Cs is black (0), the backdrop color will be shown after the blending, as:

    Cb + 0 — (Cb × 0) = Cb + 0 — 0 = Cb

    When Cs is white (1) the result will be white with any backdrop, as:

    Cb + 1 -(Cb × 1) = Cb + 1 — Cb = 1

    1. Image shown through text

    To display text showing through its background image, we use the screen blend mode with black text and white surrounding space.

    Currently our text looks like below, in the next step we’ll add custom color to the background.

    Adding color

    As you might’ve guessed by now, using blend modes leave us only two color choices for the area that surrounds the text — black or white. However with white, it’s possible to add some color to it using an overlay, if the overlay color matches nicely with the image used.

    To add color to the surrounding area, add a

    With this technique, we could color the surrounding area around the text with the image background:

    Note that the technique works well only with subtle transparent colors. If you use a fully opaque color, or a color that doesn’t match with the image, the image appearing inside the text will have a very visible tint of the color used, so unless it’s a look that you’re going for, avoid opaque colors.

    2. Text surrounded by image background

    Even though a normal text placement over an image background requires the same technique, I’m going to show you an example of how the above demo looks like when the effect is reversed, i.e. when the text color is white and the background is black.

    You can use the same overlay in order to add some color to the text, unless you want to keep it white.

    And below you can see how the reverse case looks like:

    Note that in Internet Explorer, or any other browser that doesn’t support the mix-blend-mode property, the image background won’t appear, and the text will remain black (or white).

    Применение режима наложения CSS3

    16 сентября 2014 | Опубликовано в css | Нет комментариев »

    Если вы когда-либо использовали графический редактор, такой как Photoshop или Pixelmator, вы, вероятно, уже знакомы с режимами наложения. Режимы наложения — это ряд режимов, которые позволяют объекту смешаться с другими объектами, и создают таким образом результирующее изображение. При правильном использовании режим наложения позволит получить впечатляющий результат, например, такой:

    Обратите внимание: чтобы этот режим работал, требуется включить его на странице chrome://flags.

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

    Приступим

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

    Обратите внимание: в браузере Chrome, чтобы режим наложения работал, нужно включить экспериментальные функции веб-платформы на странице chrome://flags.

    Фоновый и смешивающий режимы наложения

    У режима наложения существуют два недавно введенных свойства CSS: mix-blend-mode и background-blend-mode.

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

    Как и в Photoshop, мы можем применить следующие режимы наложения к свойствам CSS: normal (), multiply (), screen (), overlay (), darken (), lighten (), color-dodge (), color-burn (), hard-light (), soft-light (), difference (), exclusion (), hue (), saturation (), color () и luminosity ().

    Настройки режима наложения в панели слоев Photoshop.

    Использование режима наложения CSS3

    Логотип Google красочный, и ему придавали разные формы для проекта Google Doodle. В этом уроке мы применим эффект наложения на логотипе Google, чтобы проиллюстрировать, как работает это новое свойство CSS3.

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

    После этого мы добавим цвета для логотипа Google, полученные с сайта BrandColors. В этом месте мы выберем элемент, используя селектор nth-child, который позволит нам применить стили без добавления дополнительных классов каждому элементу span, оборачивающему буквы.

    Вот так выглядит логотип на этом этапе. Логотип выглядит более плотно, так как мы уменьшили промежутки между буквами на -25px при помощи дополнительного кода.

    Теперь мы применим режим наложения.


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

    Мы применили на логотипе и свойство прозрачности, и режим наложения CSS3. Результат, как и ожидалось, необычный: цвета логотипа Google со свойством прозрачности выглядят выдохшимися и выцветшими. Посмотрите пример их сравнения в действии ниже.

    Автор урока Thoriq Firdaus

    One more step

    Please complete the security check to access codepen.io

    Why do I have to complete a CAPTCHA?

    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

    What can I do to prevent this in the future?

    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

    Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

    Cloudflare Ray ID: 534067cbea408dff • Your IP : 188.64.174.135 • Performance & security by Cloudflare

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

    Бухвалова Юлия, Livejournal

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

    Презентация в лучшем виде:

    • + флаг: chrome://flags/#enable-experimental-web-platform-features
    • + флаг: opera://flags/#enable-experimental-web-platform-features

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

    Так себе вид:

    background-blend-mode

    mix-blend-mode

    1. normal
    2. multiply
    3. screen
    4. overlay
    5. darken
    6. lighten
    7. color-dodge
    8. color-burn
    1. hard-light
    2. soft-light
    3. difference
    4. exclusion
    5. hue
    6. saturation
    7. color
    8. luminosity

    Градиенты

    Варианты применения

    Эффекты по наведению

    Виньетирование

    Цветовая схема

    My Blog

    Rainy day

    Nunc eu accumsan lorem, nec eleifend massa. Integer lobortis bibendum neque a pellentesque. Nunc ullamcorper hendrerit mauris, id gravida turpis facilisis in.

    Donec non diam eleifend, lobortis urna id, vestibulum erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Обрезание фона

    SVG-маски

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

    Dragons and Knights

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

    Phasellus nec sodales urna. Morbi in maximus magna. Nunc tincidunt justo augue, vel mattis risus condimentum sed. Proin sodales eget urna ut tempus. In bibendum justo vitae efficitur cursus.

    In hac habitasse platea dictumst. Etiam et tortor pulvinar dui eleifend egestas. Nullam venenatis risus massa, at faucibus risus ullamcorper id.

    Dragons and Knights

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

    Phasellus nec sodales urna. Morbi in maximus magna. Nunc tincidunt justo augue, vel mattis risus condimentum sed. Proin sodales eget urna ut tempus. In bibendum justo vitae efficitur cursus.

    In hac habitasse platea dictumst. Etiam et tortor pulvinar dui eleifend egestas. Nullam venenatis risus massa, at faucibus risus ullamcorper id.

    Dragons and Knights

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

    Phasellus nec sodales urna. Morbi in maximus magna. Nunc tincidunt justo augue, vel mattis risus condimentum sed. Proin sodales eget urna ut tempus. In bibendum justo vitae efficitur cursus.

    In hac habitasse platea dictumst. Etiam et tortor pulvinar dui eleifend egestas. Nullam venenatis risus massa, at faucibus risus ullamcorper id.

    Режимы наложения для текста в CSS

    Привет, сегодня я покажу как можно сделать текст на сайте интереснее при помощи свежей CSS технологии blend-mode. Это аналог режимов наложения в фотошопе. Принцип работы простой:

    1. Создать контейнер, которому присвоить в качестве background любую картинку.
    2. Внутри этого контейнера необходимо создать другой блочный контейнер, т.к. необходимо чтобы этот внутренний контейнер занимал всю ширину (и возможно высоту) родительского контейнера.
    3. Этому дочернему контейнру присвойте белую подложку и цвет шрифта чёрный.
    4. Тепер самое главное, добавляем дочернему контейнеру свойство mix-blend-mode со значением lighten, что значит пиксели который «светлее» будут наверху. Так как подложка у нас белая, то в ней ничего не поменяется, а вот текст полностью заменится картинкой родительского контейнера.
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL