23 May 2014

Режимы наложения слоёв в Web

Website developmentCSS
Привет, Хабр!
Одна из главных причин тяжёлых увечий дизайнеров претензий к неопытным дизайнерам от верстальщиков, при получении от них PSD-макетов — это наличие слоёв с заданными режимами смешивания, отличными от normal. Вполне возможно, что скоро это уйдёт в прошлое!
Речь пойдёт о реализации спецификации "Compositing and Blending Level 1" в современных браузерах.


Что это и для чего?

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

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


2) Часто дизайнеры ленятся вырезать фон из картинки и используют наложение картинки без прозрачности на слой так, что фоновый чёрный/белый цвет будет в данном режиме преобразуются в прозрачный (режим screen/multiply):

(на картинке внизу показал кусочек накладываемого изображения «как есть»)

3) Иногда можно использовать данную технологию для реализации эффектов с текстом, например, в логотипах:


4) Для создания различных эффектов-красивостей:
Демо, автор Justin Windle, http://soulwire.co.uk



Список режимов

Для примера будем накладывать тигра на такую картинку в разных режимах:

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue*
saturation*
color*
luminosity*
* здесь я взял раскрашенную в красные оттенки картинку, для демонстрации эффекта


Технологии применения и поддержка браузерами

По спецификации, применять режимы наложения можно в четырёх случаях:

1) Для фонового изображения в CSS
background-blend-mode: <blend-mode>;
Поддерживают: Chrome 35+, Firefox 30+ beta (войдёт ли в релиз этот функционал, ещё вопрос, т. к. скорее всего уже переносили «приземление» этого функционала).

2) Для HTML-элементов
mix-blend-mode: <blend-mode>;
Поддерживают: пока нет, но активно идёт разработка по реализации.

3) Для SVG
<feBlend mode="<blend-mode>">
Поддерживают: Chrome 35+, IE 10+ (с отличиями)

4) Для Canvas
.globalCompositeOperation = <blend-mode> | <composite-mode>*;
* доступны дополнительные режимы
Поддерживают: Chrome 29+, Firefox 24+, Opera 17+, Safari 6.1+

Узнать подробнее о поддержке браузерами данного стандарта можно в таблице от adobe.
Tags:csshtml5canvassvg
Hubs: Website development CSS
+27
44.4k 221
Comments 20
Popular right now
Top of the last 24 hours