04 Июль

15 режимов смешивания в CSS

Июль 4
Автор SeRbGa
Печать Эл. почта

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

Теперь таке-же можно сделать динамично с помощью CSS3.

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

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

Как использовать фоновый режим смешивания

В CSS3 есть много опций режима смешивания, но самым полезным в наших целях является фоновый режим смешивания. Это свойство позволяет нам смешивать два изображения или изображение и цвет фона.

Вот код который нам потребуется:

И вот наш основной CSS:

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

Мы теперь готовы добавить режимы смешивания.

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

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

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

Multiply

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

background-blend-mode: multiply;

Screen

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

background-blend-mode: screen;

Оverlay

Наложение (overlay) - сложный режим смешивания. Умножение зависит от основного цвета: легкие цвета становятся легче, темные цвета становятся более темными.

background-blend-mode: overlay;

Darken

Затемнение (darken) затемняет изображение. Смотрит на два перекрывающихся пикселя и выбирает более темные из двух.

background-blend-mode: darken;

Lighten

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

background-blend-mode: lighten;

Сolor-dodge

Цветовой баланс (color-dodge) украшает основной цвет, чтобы отразить цвет смешения при этом уменьшая контраст.

background-blend-mode: color-dodge;

Color-burn

Color-burn - противоположность color-dodge - затемняет основной цвет, приводящий к увеличению контраста.

background-blend-mode: color-burn;

Hard-light

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