Режимы наложения слоёв в Web
Привет, Хабр! Одна из главных причин тяжёлых увечий дизайнеров претензий к неопытным дизайнерам от верстальщиков, при получении от них PSD-макетов — это наличие слоёв с заданными режимами смешивания, отличными от normal. Вполне возможно, что скоро это уйдёт в прошлое! Речь пойдёт о реализации спецификации «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:
mix-blend-mode:
