Web Layer Modes
Hello, Habr!
One of the main reasons forsevere injuries of designers to claims to inexperienced designers from layout designers, when receiving PSD layouts from them, is the presence of layers with preset blending modes other than normal . It is possible that soon it will be a thing of the past!
It will be about implementing the specification " Compositing and Blending Level 1 " in modern browsers.
1) Photo effects, such as discoloration of the picture, sepia, color overlay. For example, it will be enough to use only one color picture to get a smooth animation from bleached to color on hover:
(on click - a live example on jsfiddle) 2) Often, designers are too lazy to cut the background out of the picture and use the overlay picture without transparency on the layer so that background black / white color will be converted to transparent in this mode ( screen / multiply mode
): (in the picture below showed a piece of the 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, author Justin Windle, http: //soulwire.co.uk
* here I took a picture painted in red shades , to demonstrate the effect
1) For a background image in CSS
2) For HTML elements
3) For SVG
4) For Canvas
Support: Chrome 29+, Firefox 24+, Opera 17+, Safari 6.1+.
You can learn more about support for browsers of this standard in the table from adobe .
One of the main reasons for
It will be about implementing the specification " Compositing and Blending Level 1 " in modern browsers.
What is it and for what?
This standard describes the rules for overlapping each other, similar to how it is done in Photoshop . For example, in multiply mode, the final color of the pixel will be equal to the product of the colors of two layers. Thanks to this, you can achieve various effects, 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 picture to get a smooth animation from bleached to color on hover:
(on click - a live example on jsfiddle) 2) Often, designers are too lazy to cut the background out of the picture and use the overlay picture without transparency on the layer so that background black / white color will be converted to transparent in this mode ( screen / multiply mode
): (in the picture below showed a piece of the 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, author Justin Windle, http: //soulwire.co.uk
Mode list
For example, we will overlay 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 * |
Application Technologies and Browser Support
According to the specification, you can apply blending modes in four cases:1) For a background image in CSS
background-blend-mode: <blend-mode>;
Support: Chrome 35+, Firefox 30+ beta (whether this functionality will be included in the release, another question, because most likely they have already “landed” this functionality). 2) For HTML elements
mix-blend-mode: <blend-mode>;
Support: not yet, but development is underway for implementation. 3) For SVG
<feBlendmode="<blend-mode>">
Support: Chrome 35+, IE 10+ ( with differences ) 4) For Canvas
.globalCompositeOperation = <blend-mode> | <composite-mode>*;
* Additional modes are available.Support: Chrome 29+, Firefox 24+, Opera 17+, Safari 6.1+.
You can learn more about support for browsers of this standard in the table from adobe .