CSS режимы наложения, которые перекрывают изображение

CSS режимы наложения

CSS режимы наложения, которые перекрывают изображение

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

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

 

Браузерная поддержка

Как можно заметить, браузерная поддержка для CSS background-blend-mode улучшается. Более старые версии браузеров требуют префиксы поставщика, либо активировать экспериментальные функции, но caniuse.com сообщает о поддержке в текущих версиях Chrome, Firefox, Opera, а Safari в ближайшее время.

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

 

Как использовать CSS режимы наложения background-blend-mode

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

Нам потребуется этот код:

<div class="blend"></div>

А вот основной CSS:

.blend
{
        width:782px;
        height:540px;
        background:#3db6b8 url("") no-repeat center center;
}

Теперь мы готовы добавить CSS режимы наложения.

Для этого, мы добавим еще один класс для, нашего DIV, класс «multiply»:

<div class="blend multiply"></div>

Теперь мы создадим еще одно правило для стиля:

.blend.multiply
 {
        background-blend-mode: multiply;
 }

Готовые коды ко всем 15-ти стилям можете скачать, нажав на кнопку:


Скачать

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

background-blend-mode: multiply;

 


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

background-blend-mode: screen;

 


Overlay — представляет собой сложный режим наложения. Наложение зависит от базовых цветов: светлые цвета светлеют сильнее, темные цвета становятся более темными.

background-blend-mode: overlay;

 


Darken — затемняет изображение. Этот режим смотрит на два перекрывающихся пикселя и выбирает темный из двух.

background-blend-mode: darken;

 


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

background-blend-mode: lighten;

 


Color dodge — осветляет основной цвет для отражения совмещенного цвета, путем уменьшения контраста.

background-blend-mode: color-dodge;

 


Color burn — полярная противоположность Color dodge, он затемняет основной цвет, это соответственно увеличивает контраст.

background-blend-mode: color-burn;

 


Hard light — либо умножает, либо осветляет цвета. Здесь все зависит от цвета. Например, если смесь светлее серого на 50%, изображение будет более светлее, а если наоборот, оно будет более темным. Это способ хорош для улучшения бликов и теней в изображениях.

background-blend-mode: hard-light;

 


Soft light — похож на Hard light, но вместо скрининга или умножения цвета, Soft light сжигает цвета, что приводит к более тонкому эффекту.

background-blend-mode: soft-light;

 


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

background-blend-mode: difference;

 


Exclusion — похож на Difference, но он производит меньший контраст, поэтому он немного более удобен для использования.

background-blend-mode: exclusion;

 


Hue — принимает насыщенность и яркость основного цвета и оттенки цветовых смесей и объединяет их.

background-blend-mode: hue;

 


Saturation — как  и Hue, сливает два значения базового цвета в одно свойство, и увеличивает насыщение.

background-blend-mode: saturation;

 


Color — работает по той же схеме, как hue и saturation, однако выделяет сильнее яркость основного цвета в насыщенности цвета.

background-blend-mode: color;

 


Luminosity — это противоположность Color, он сочетает в себе насыщенность и оттенок базового цвета, и яркость совмещенного цвета.

background-blend-mode: luminosity;

 

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *