Improved effects with background layer blending in CSS

Original author: Bennett Feely
  • Transfer
If one picture deserves a thousand words, then the mixture of two pictures deserves much more. In the same way, the design possibilities that open up with the advent of the possibility of mixing layers in CSS are much more than you think.

When you hear a discussion of the CSS Blend Modes features , there are usually three new CSS properties that have received good support in modern browsers.

These properties are:

  • background-blend-mode - for blending background images, gradients and background colors of elements;
  • mix-blend-mode - for mixing elements with other elements;
  • isolation - less used property, which is used together with mix-blend-mode to prevent mixing of elements.



Be that as it may, this article will be devoted to the background-blend-modeproperty that enjoys the most widespread support and the possibilities of using it to create attractive backgrounds and photo effects on your website that were once possible only in Photoshop.

Combining CSS gradients with background-blend-mode


CSS gradients can be used in the property background. Features such as linear-gradient(), radial-gradient(), repeating-linear-gradient()and repeating-radial-gradient()have a wide support and a more rigorous, standardized syntax in the browser.

But the property backgroundcan allow more than one gradient, displaying them on top of each other, if you list each next one separated by commas. Lea Verou showed impressive patterns that can be created using this technique: from chess boards to bricks and stars.



But now, when we have a property background-blend-mode, we can create all new gradients and patterns.

Spectral background


Let's apply three gradients to make a background with an almost full range of colors that can be displayed on the monitor.

.spectrum-background {
    background:
        linear-gradient(red, transparent),
        linear-gradient(to top left, lime, transparent),
        linear-gradient(to top right, blue, transparent);
    background-blend-mode: screen;
}



This effect was previously possible only in the form of a picture that occupied dozens of kilobytes. But we just reproduced it using CSS less than 200 bytes in size, not to mention saving an HTTP request.

Checkered background


We can also create interesting patterns that mimic a checkered rug using a gradient and background-blend-mode.

.plaid-background {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 25%,
            dodgerblue 0,
            dodgerblue 50%
       ),
       repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 25%,
            tomato 0,
            tomato 50%
        ),
        repeating-linear-gradient(
            transparent 0,
            transparent 25%,
            gold 0,
            gold 50%
        ), white;
    background-blend-mode: multiply;
    background-size: 100px100px;
}



Circle background


Here is another background, now using a radial gradient: 

.circles-background {
    background:
        radial-gradient(
            khaki 40px,
            transparent 0,
            transparent 100%
        ),
        radial-gradient(
            skyblue 40px,
            transparent 0,
            transparent 100%
        ),
        radial-gradient(
            pink 40px,
            transparent 0,
            transparent 100%
        ), snow;
    background-blend-mode: multiply;
    background-size: 100px100px;
    background-position: 00, 33px33px, -33px -33px;
}



More backgrounds


With the help of Yoksel and Una Kravets, I prepared a collection of 24 templates made using blending that will make your website faster and more attractive.



Photo effects with background-blend-mode


Although background-imageit allows you to set several gradients for an element, the trick is that in the same way we can set several background images using the design url(). When we combine this with background-blend-modeproperties like filter, something really interesting can turn out.

Pencil sketch effect




We can use CSS to make the photo to the left look like a pencil sketch. We do not need Photoshop, HTML5 canvas, WebGL, Javascript libraries. Five CSS properties are all that will be required.

Although we can use other block-level elements, such as body, section, figure, to start using this HTML:

<divclass=”pencil-effect”></div>

Let's start the simulation. Replace chapel.jpgwith the url of the image you are using. We will set the background image twice and save its background size.

.pencil-effect {
    background:
        url(chapel.jpg),
        url(chapel.jpg);
    background-size: cover;
}

Below in the first square is the result of our first step:



Now add the blend mode:

background-blend-mode: difference;

Oh no, where did it go? We got a completely black square. The subtraction mode for blending takes two backgrounds and takes away pixel by pixel the darker color of one background from the lighter color of another background.



If you are confused about what is happening, let's see what happens when we slightly shift the two backgrounds with background-positionand calc().

background-position:
    calc(50% — 1px) calc(50% — 1px),
    calc(50% + 1px) calc(50% + 1px);



Using a comma, we set two background positions, each of which corresponds to one copy of the background image. The first image we move from the center along the x axis to the left one pixel and from the center along the y axis upwards to a pixel. For the second copy of the background image, we do the exact opposite, moving it down and to the right.

We've got two background images that are slightly offset, but the whole picture is still centered in our element. Now, when the subtraction mode detects the difference between the two images, the edges in the photo are visible. Great, isn't it?

Finally, we will use the property filterto invert the photo and translate it into shades of gray.

filter: brightness(3) invert(1) grayscale(1);

For this particular photo, we will also increase the brightness, which has a secondary effect regarding increasing the contrast of the lines.

Here is the final CSS snippet for this effect:

.pencil-effect {
    background:
        url(photo.jpg),
        url(photo.jpg);
    background-size: cover;
    background-blend-mode: difference;
    background-position:
        calc(50% — 1px) calc(50% — 1px),
        calc(50% + 1px) calc(50% + 1px);
    filter: brightness(3) invert(1) grayscale(1);
}



School board effect




We can recreate the effect of the school blackboard by completing the steps for the pencil sketch effect and eliminating the function invert(1)at the final stage.

Night Vision Effect




Let's recreate another effect with the CSS mixing capabilities and take a photo that looks like we made it through a lens in a night vision device.

There are three parts of our background that we will mix together using mode overlay. This blend mode brightens and darkens the background, and works as a combination of two other blend modes - multiplyand screen.

First we set the background image, this time one.

background: url(moose.jpg);
background-size: cover;
background-position: center;



Now add the gradient and blending properties of the background layers. Here we use a radial gradient from translucent lime to black.

background:
    url(moose.jpg),
    radial-gradient(
        rgba(0,255,0,.8),
        black
    );
background-blend-mode: overlay;



Not so bad, you can leave it all that way. But I have another idea that can make the effect more authentic - add a few fake scan lines with a repeating gradient background to the background.

background:
    url(moose.jpg),
    radial-gradient(
        rgba(0,255,0,.8),
        black
    ),
    repeating-linear-gradient(
        transparent 0,
        rgba(0,0,0,.2) 3px,
        transparent 6px
    );



And finally, here is the full CSS snippet used for this effect:

.night-vision-effect {
    background:
        url(moose.jpg),
        radial-gradient(
            rgba(0,255,0,.8),
            black
        ),
        repeating-linear-gradient(
            transparent 0,
            rgba(0,0,0,.2) 3px,
            transparent 6px
        );
    background-blend-mode: overlay;
    background-size: cover;
 }

More photo effects


I made a gallery of 20 images with CSS effects that you can use for your sites.



Browser support and gradual degradation


The good news is that the property is background-blend-modefully supported in Firefox, Chrome and Opera.

Part of the good news is that it has enough support in Safari in terms of the effects that we have considered here, but Safari is not currently supported saturation, hue, colorand luminosity.

The bad news is that Internet Explorer and IE Edge do not support CSS mixing properties at all.

This means that we must take into account the presence of browsers that still do not support background-blend-mode. The remarkable CSS rule @supportsmakes it quite simple. Here are two examples.

For the first example, we take our spectral background gradient and provide backup capabilities in case the functionbackground-blend-modenot supported We use for our example background: grayas a reserve, but in this place you can use any CSS.

.spectrum-background {
    background: gray;
    @supports (background-blend-mode: screen) {
        background:
            linear-gradient(red, transparent),
            linear-gradient(to top left, lime, transparent),
            linear-gradient(to top right, blue, transparent);
        background-blend-mode: screen;
    }
}

And here the effect of a pencil sketch with a fallback. We check two important properties that are required to create an effect: filterand background-blend-mode. If the user's browser does not support them (or if the browser does not support CSS @supports), we will return to the original photo.

.pencil-effect {
    background-image: url(photo.jpg);
    background-size: cover;
    @supports (background-blend-mode: difference) and (filter: invert(1)) {
        background-image:
            url(photo.jpg),
            url(photo.jpg);
        background-blend-mode: difference;
        background-position:
            calc(50% — 1px) calc(50% — 1px),
            calc(50% + 1px) calc(50% + 1px);
        filter: brightness(3) invert(1) grayscale(1);
    }
}

Sources:


Blending Modes Demystified by Justin McDowell
Basics of CSS Blend Modes by Chris Coyier
CSS3 Patterns Gallery by Lea Verou
Una Kravets’ 6-part CSS Image Effects Series
Can I use… Support for background-blend-mode
Image Effects with CSS by Bennett Feely
New CSS Gradient possibilities with the background-blend-mode property by Bennett Feely
Experimental Polyfill for background-blend-mode by Rik Cabanier
Compositing and Blending Level 1 Specification by the W3C


LOOKING.HOUSE — на проекте собрано более 150 точек looking glass в 40 странах. Можно быстро выполнить команды host, ping, traceroute и mtr.


Теги:

Also popular now: