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

Хотя Adobe Photoshop не изобретал режимов наложения, его реализация, безусловно, самая подражаемая. Но теперь, вам не нужен Photoshop, чтобы стилизовать ваше изображение таким образом, потому что мы можем делать все это на лету с помощью CSS3.

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

Поддержка браузерами свойства background-blend-mode улучшается. Ранние версии браузеров требовали специфичного префикса и (или) активации экспериментальных функций. Но сайт caniuse.com сообщает нам, что уже поддерживают текущие версии Chrome, Firefox, Opera, и Safari. До сих пор нет ни каких признаков поддержки со стороны IE, но так как это очень прогрессивное улучшение, мы можем начинать пользоваться им.

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

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

Вот код, который требуется:

И здесь наш базовый CSS:

Сейчас мы готовы использовать режим наложения.

Чтобы сделать это мы собираемся добавить другой класс к нашему div’у, например, “multiply”:

И тогда мы создадим второе правило стиля:

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

Умножение

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

Экран

Режим «Экран» перемножает два инвертированных по цвету пикселя. Экран это противоположный умножению и использование экрана на белом выдаст в результате белое изображение, а на чёрным — оставить изображение неизменным.

Наложение

Наложение является сложным режим смешивания. Умножение зависит от базового цвета: светлые цвета становятся светлее, темные цвета становятся темнее.

Затемнение

Затемнение, затемняет изображение. Оно смотрит на два перекрывающихся пикселя и выбирает более тёмный из двух.

Высветление

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

Осветление основы

Осветление основы делает светлее базовый цвет для отражения совмещённого цвета в результате уменьшения контраста

Цветовой ожог

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

Жесткий свет

Жесткий свет либо умножает, или осветляет цвета в зависимости от цвета. Если смесь легче чем 50% серого изображение будет светлее, в противном случае она будет затемнена. Это отличный способ для повышения бликов и теней в кадре.

Мягкий свет

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

Разница

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

Исключение

Исключение похожа на разницу, но оно производит к меньшему контрасту, следовательно оно немного удобнее.

Оттенок

Оттенок берёт яркость и насыщенность базового цвета и оттенок цвета смеси и объединяет их.

Насыщенность

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

Цвет

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

Светимость

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

 

Изображение маяка, используемое в статье взято с Shutterstock.


Хотите узнать, как заполучить короткий и красивый адрес электронной почты (e-mail)? или как выбрать качественный хостинг? Всё это и многое другое на сайте codeby.net.  Подписывайтесь на нашу e-mail рассылку (внизу страницы) или на ленту новостей и вы узнаете первым о новых статьях! Также вступайте в нашу официальную группу вконтакте — там вам очень рады!

Поделитесь этой статьёй с друзьями, если хотите выхода новых статей: