Режимы наложения CSS3: свойство background-blend-mode
Karina | 13.10.2014
Большинство людей для обработки изображений используют Adobe Photoshop. Помимо всех преимуществ, в этой программе есть еще один весомый плюс, который дает ей возможность опережать конкурентов – режимы наложения слоев, или blending modes.
Такие режимы позволяют создавать интересные эффекты, смешивая несколько слоев. Кто хоть раз пользовался этой функцией в Adobe Photoshop, знает, какие широкие возможности она предоставляет. Но знаете ли вы, что режимы смешивания также доступны и в CSS? Сегодня мы рассмотрим это на примерах.
Поддержка браузерами
На сегодняшний день около 50% используемых браузеров поддерживают свойство background-blend-mode, включая новые версии Google Chrome, Opera и Mozilla Firefox. Браузер Internet Explorer на данный момент не отображает эти эффекты. Список версий браузеров можно просмотреть на сайте caniuse.com.
Как использовать режим наложения CSS3
С помощью свойства background-blend-mode можно смешать два изображения либо изображение и фон. Термин «основной цвет» означает исходный в изображении цвет, «совмещенный» – цвет, который накладывается, «результирующий» – цвет, полученный в результате наложения. Мы будем смешивать фотографию caracal.jpg и однотонный фон #eac071. Для этого зададим класс blend и создадим основной «каркас» CSS:
.blend {
width:680px;
height:423px;
background:#eac071 url("caracal.jpg") no-repeat center center;
}
Теперь можно создавать режимы смешивания, добавляя еще один класс и стиль. Ниже приведено 15 примеров.
Color Burn (затемнение основы)
Этот режим затемняет базовые цвета, делая картинку более контрастной. Создаем класс burn и прописываем стиль:
.blend.burn {
background-blend-mode: color-burn;
}
Результат:
Color (цвет)
Яркость основного цвета + насыщенность и цветовой тон совмещенного цвета = результат режима Color.
Color проявляет себя лучше всего при раскраске монохромных изображений.
.blend.color {
background-blend-mode: color;
}
Darken (замена темным)
Здесь из двух пикселей выбирается тот, который является более темным. Если основной цвет пикселя более светлый, чем у совмещенного, он заменяется более темным пикселем. Остальные пиксели не изменяются. При применении белого цвета результат не виден.
.blend.darken {
background-blend-mode: darken;
}
Difference (разница)
В режиме Difference вычитаются пиксели либо основного, либо совмещенного цвета. Это зависит от того, какой из них будет более ярким. Смешивание с черным цветом результата не дает, а при смешивании с белым основные цвета инвертируются.
.blend.difference {
background-blend-mode: difference;
}
Color Dodge (осветление основы)
Фильтр осветляет картинку и делает ее менее контрастной за счет замены основного цвета более ярким.
.blend.dodge {
background-blend-mode: color-dodge;
}
Exclusion (исключение)
Exclusion схож с режимом Difference, но изображение становится менее контрастным. Смешивание с белым и черным цветами приводит к аналогичным результатам, что и в Difference.
.blend.exclusion {
background-blend-mode: exclusion;
}
Hard Light (жесткий свет)
При необходимости осветлить или затемнить некоторые участки изображения используйте этот режим. Принцип его работы таков: если совмещенный цвет более темный, чем 50% серого, картинка затемняется. Если же совмещенный цвет светлее 50% серого, то картинка, соответственно, становится более светлой.
.blend.hard {
background-blend-mode: hard-light;
}
Hue (цветовой тон)
Режим Hue сочетает насыщенность и яркость основного цвета с цветовым тоном совмещенного.
.blend.hue {
background-blend-mode: hue;
}
Lighten (замена светлым)
В этом режиме картинка становится светлее. Выбираются те цвета, которые являются более светлыми.
.blend.lighten {
background-blend-mode: lighten;
}
Luminosity (яркость)
Luminosity – противоположность режиму Color. Здесь сочетается яркость совмещенного цвета с цветовым тоном и насыщенностью основного.
.blend.luminosity {
background-blend-mode: luminosity;
}
Multiply (умножение)
Здесь значения основного и совмещенного цветов перемножаются, и результирующий цвет всегда получается более темным.
.blend.multiply {
background-blend-mode: multiply;
}
Overlay (перекрытие)
При смешивании основного и совмещенного цветов яркие цвета осветляются, а темные – затемняются.
.blend.overlay {
background-blend-mode: overlay;
}
Saturation (насыщенность)
Светимость и цветовой тон основного цвета сочетается с насыщенностью совмещенного цвета.
.blend.saturation {
background-blend-mode: saturation;
}
Screen (осветление)
В этом режиме картинка становится более светлой. Смешивая изображение с белым цветом, в результате получится белый цвет. Черный цвет результата не дает.
.blend.screen {
background-blend-mode: screen;
}
Soft Light (мягкий свет)
В зависимости от совмещенного цвета, изображение станет либо светлее, либо темнее. Работа режима схожа с Hard Light, только здесь в результате получается более мягкий свет.
.blend.soft {
background-blend-mode: soft-light;
}
Подобрав подходящие для смешивания цвета, можно без использования Adobe Photoshop добиться красивых эффектов, которые оживят ваши изображения. Вы можете скачать архив с файлами, чтобы просмотреть исходники и лучше ознакомиться с материалом. Желаем творческих успехов!
Режимы наложения слоёв в Web / Habr
Привет, Хабр!Одна из главных причин
Речь пойдёт о реализации спецификации «Compositing and Blending Level 1» в современных браузерах.
Что это и для чего?
Данный стандарт описывает правила наложения слоёв друг на друга, аналогично тому, как это делается в Photoshop. Например, в режиме multiply итоговый цвет пикселя будет равен произведению цветов двух слоёв. Благодаря этому, можно добиться различных эффектов, таких как:1) Фотоэффекты, такие как обесцвечивание картинки, сепия, наложение цвета. Например, достаточно будет использовать только одну цветную картинку, чтобы получить плавную анимацию от обесцвеченной к цветной при наведении:
(по клику — живой пример на jsfiddle)
2) Часто дизайнеры ленятся вырезать фон из картинки и используют наложение картинки без прозрачности на слой так, что фоновый чёрный/белый цвет будет в данном режиме преобразуются в прозрачный (режим screen/multiply):
(на картинке внизу показал кусочек накладываемого изображения «как есть»)
3) Иногда можно использовать данную технологию для реализации эффектов с текстом, например, в логотипах:
4) Для создания различных эффектов-красивостей:
Демо, автор Justin Windle, http://soulwire.co.uk
Список режимов
Для примера будем накладывать тигра на такую картинку в разных режимах:* здесь я взял раскрашенную в красные оттенки картинку, для демонстрации эффекта
Технологии применения и поддержка браузерами
По спецификации, применять режимы наложения можно в четырёх случаях:1) Для фонового изображения в CSS
background-blend-mode: <blend-mode>;mix-blend-mode: <blend-mode>;3) Для SVG
<feBlend mode="<blend-mode>">4) Для Canvas
.globalCompositeOperation = <blend-mode> | <composite-mode>*;Поддерживают: Chrome 29+, Firefox 24+, Opera 17+, Safari 6.1+
Узнать подробнее о поддержке браузерами данного стандарта можно в таблице от adobe.
15 режимов наложения средствами CSS (CSS blend modes), которые дадут новый запал вашим изображениям
Одна из самый ценимых особенностей Photoshop’а, возможно, особенность которая позволяет опережать своих конкурентов — это режимы наложения. Режимы наложения берут два пикселя, лежащих друг над другом и комбинируют их различными способами, например, режим затемнения просто выведет более тёмный из двух тёмных пикселей. Когда распространяют по целому изображению, режимы наложения могут производить некоторые потрясающие эффекты.
Хотя Adobe Photoshop не изобретал режимов наложения, его реализация, безусловно, самая подражаемая. Но теперь, вам не нужен Photoshop, чтобы стилизовать ваше изображение таким образом, потому что мы можем делать все это на лету с помощью CSS3.
Поддержка браузерами свойства background-blend-mode улучшается. Ранние версии браузеров требовали специфичного префикса и (или) активации экспериментальных функций. Но сайт caniuse.com сообщает нам, что уже поддерживают текущие версии Chrome, Firefox, Opera, и Safari. До сих пор нет ни каких признаков поддержки со стороны IE, но так как это очень прогрессивное улучшение, мы можем начинать пользоваться им.
Есть несколько вариантов режима наложения в рекомендациях кандидатов CSS3, но наиболее полезным для наших целей является background-blend-mode. Это свойство позволяет смешать два изображения или изображения и цвет фона.
Вот код, который требуется:
<div></div>
И здесь наш базовый CSS:
.blend
{
width:782px;
height:540px;
background:#3db6b8 url("lighthouse.jpg") no-repeat center center;
}Сейчас мы готовы использовать режим наложения.
Чтобы сделать это мы собираемся добавить другой класс к нашему div’у, например, “multiply”:
<div></div>
И тогда мы создадим второе правило стиля:
.blend.multiply
{
background-blend-mode: multiply;
}Если вы ходите взглянуть на исходный код, вы можете загрузить его здесь.
Умножение, как следует из названия, умножает базовsый пиксель на совмещаемый цвет, результатом является затемнение. Умножаемые чёрные делают результат чёрным, а умножение былых оставляет изображение без изменений.
background-blend-mode: multiply;
Режим «Экран» перемножает два инвертированных по цвету пикселя. Экран это противоположный умножению и использование экрана на белом выдаст в результате белое изображение, а на чёрным — оставить изображение неизменным.
background-blend-mode: screen;
Наложение является сложным режим смешивания. Умножение зависит от базового цвета: светлые цвета становятся светлее, темные цвета становятся темнее.
background-blend-mode: overlay;
Затемнение, затемняет изображение. Оно смотрит на два перекрывающихся пикселя и выбирает более тёмный из двух.
background-blend-mode: darken;
Полная противоположность затемнению, высветление осветляет изображение путем сравнения двух перекрывающихся пикселей и выбрав светлого из них.
background-blend-mode: lighten;
Осветление основы делает светлее базовый цвет для отражения совмещённого цвета в результате уменьшения контраста
background-blend-mode: color-dodge;
Цветовой ожог полная противоположность Осветлению основы, он затемняет базовый цвет, что приводит к увеличению контраста.
background-blend-mode: color-burn;
Жесткий свет либо умножает, или осветляет цвета в зависимости от цвета. Если смесь легче чем 50% серого изображение будет светлее, в противном случае она будет затемнена. Это отличный способ для повышения бликов и теней в кадре.
background-blend-mode: hard-light;
Мягкий свет похож на жестком свете, но вместо умножения или скрининга цвета, мягкий свет использует высветление основы и ожог для нежного эффекта.
background-blend-mode: soft-light;
Разница сравнивает два перекрывающихся пикселей и вычитает цвет с большей яркостью от другого.
background-blend-mode: difference;
Исключение похожа на разницу, но оно производит к меньшему контрасту, следовательно оно немного удобнее.
background-blend-mode: exclusion;
Оттенок берёт яркость и насыщенность базового цвета и оттенок цвета смеси и объединяет их.
background-blend-mode: hue;
Насыщенность, как оттенок, сливается из двух значений базового цвета с одним свойством совмещенного цвета, в данном случае насыщения.
background-blend-mode: saturation;
Цвет по той же схеме, как тон и насыщенность, на этот раз, однако, это яркость основного цвета и цветовой тон и насыщенность совмещенного цвета.
background-blend-mode: color;
Светимость является противоположный цвету, она сочетает в себе тон и насыщенность базового цвета и яркость накладываемого цвета.
background-blend-mode: luminosity;
Изображение маяка, используемое в статье взято с Shutterstock.
Хотите узнать, как заполучить короткий и красивый адрес электронной почты (e-mail)? или как выбрать качественный хостинг? Всё это и многое другое на сайте codeby.net. Подписывайтесь на нашу e-mail рассылку (внизу страницы) или на ленту новостей и вы узнаете первым о новых статьях! Также вступайте в нашу официальную группу вконтакте — там вам очень рады!
Поделитесь этой статьёй с друзьями, если хотите выхода новых статей:
Применение режима наложения CSS3
Если вы когда-либо использовали графический редактор, такой как Photoshop или Pixelmator, вы, вероятно, уже знакомы с режимами наложения. Режимы наложения — это ряд режимов, которые позволяют объекту смешаться с другими объектами, и создают таким образом результирующее изображение. При правильном использовании режим наложения позволит получить впечатляющий результат, например, такой:
Применение режима наложения в логотипе, автор Ivan Bobrov.
Обратите внимание: чтобы этот режим работал, требуется включить его на странице 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, чтобы мы могли задать разные цвета и правила стилей для разных букв.
<h2> <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span> </h2>
После этого мы добавим цвета для логотипа Google, полученные с сайта BrandColors. В этом месте мы выберем элемент, используя селектор nth-child, который позволит нам применить стили без добавления дополнительных классов каждому элементу span, оборачивающему буквы.
.demo-wrapper .title {
letter-spacing: -25px;
}
span:first-child {
color: #4285f4;
position: relative;
z-index: 100;
}
span:nth-child(2) {
color: #db4437;
}
span:nth-child(3) {
color: #f4b400;
}
span:nth-child(4) {
color: #4285f4;
position: relative;
z-index: 100;
}
span:nth-child(5) {
color: #0f9d58;
}
span:nth-child(6) {
color: #db4437;
}
Вот так выглядит логотип на этом этапе. Логотип выглядит более плотно, так как мы уменьшили промежутки между буквами на -25px при помощи дополнительного кода.
Теперь мы применим режим наложения.
span {
mix-blend-mode: multiply;
}
Исходные цвета логотипа, как и цвета пересекающихся частей букв, выглядят более яркими.
Мы применили на логотипе и свойство прозрачности, и режим наложения CSS3. Результат, как и ожидалось, необычный: цвета логотипа Google со свойством прозрачности выглядят выдохшимися и выцветшими. Посмотрите пример их сравнения в действии ниже.
Демонстрация работы – Скачать исходный код
Автор урока Thoriq Firdaus
Смотрите также: