Web Layer Layer Modes

Hi, Habr!
One of the main causes of severe injuries to designers claims to inexperienced designers from layout designers, when receiving PSD layouts from them, is the presence of layers with specified blending modes other than normal . It is possible that this will soon be a thing of the past!
It will focus on the implementation of the " Compositing and Blending Level 1 " specification in modern browsers.

What is it and for what?

This standard describes the rules for superimposing layers on each other, similar to how it is done in Photoshop . For example, in multiply mode, the resulting color of the pixel will be equal to the product of the colors of the two layers. Due to this, various effects can be achieved, such as:

1) Photo effects, such as discoloration of the picture, sepia, color overlay. For example, it will be enough to use only one color image to get a smooth animation from bleached to color when hovering:
^{(on a click - a live example on jsfiddle)}

')
2) Often designers are lazy to cut the background from the image and use the overlay image without transparency on the layer so that the background black / white color will be converted to transparent in this mode ( screen / multiply mode):

^{(in the picture below showed a piece of overlay image "as is")}

3) Sometimes you can use this technology to implement effects with text, for example, in logos:


4) To create various beautiful effects:
Demo by Justin Windle, http://soulwire.co.uk

Mode list

For example, we will impose a tiger on such a picture in different modes:

normal
multiply
screen
overlay
darken
lighten
color-dodge
color burn
hard-light
soft light
difference
exclusion
hue *
saturation *
color *
luminosity *

^{* here I took a picture painted in red shades to demonstrate the effect}

Application Technologies and Browser Support

According to the specification, you can apply blend modes in four cases:

1) For background image in CSS

background-blend-mode: <blend-mode>; 

Support: Chrome 35+, Firefox 30+ beta (will this feature be included in the release, another question, since it’s likely that the touchdown of this functionality has already been tolerated).

2) For HTML elements

 mix-blend-mode: <blend-mode>; 

Support: not yet, but implementation is actively underway.

3) For SVG

 <feBlend mode="<blend-mode>"> 

Support: Chrome 35+, IE 10+ ( with differences )

4) For Canvas

 .globalCompositeOperation = <blend-mode> | <composite-mode>*; 

^{* additional modes available}
Support: Chrome 29+, Firefox 24+, Opera 17+, Safari 6.1+

You can learn more about browser support for this standard in the adobe table .