Web Layer Modes

    Hello, Habr!
    One of the main reasons for severe 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.


    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 *
    * 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 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 .

    Also popular now: