Blend Well but Do Not Stir. CSS Blending Method by Adobe

The Adobe team is pushing forward a great technology called CSS blending. What is blending itself? It’s a method that allows to combine or mix two objects so that the constituent parts become indistinguishable from one another.

Designers have already been using blending for a long time, but not in such a way. Adobe team describes couple of simple additions to CSS to add blending to the browser’s rendering model. Upon offering this feature Adobe guys received positive feedback from devs and designers. Each and every of them is familiar with this function and offered multiple options on how to created great content with this feature.

So What is Blending?

Let’s define more exactly what blending is. It is the concept that determines how layer can inherit color from the elements that are underneath. Taking the color of your element and you mix it with the color that is behind the element. The name of the blend mode specifies the mathematical formula that does the ‘mixing’.

Let’s have a look at the following pictures; the ones below are combined without blending, and it comes out that one is simply overlapping the underlying.

But when the blending effect is applied the colors are recalculated and the gradient appears on the sun.

How to Apply Blending to Your Web Page Elements

Let’s consider a specific example.

The HTML and CSS would look like:

HTML

1
2
3
4
5
6

<h2>texturing and blending</h2>
    <ul id="textured-menu">
        <li>Home</li>
        <li>About</li>
        <li>Products</li>
    </ul>

CSS

1
2
3
4
5
6
7
8
9

#textured-menu li {
    width: 200px;
    height: 200px;
    padding-top: 65px;
    text-align: center;
    border-radius: 100px;
    margin: 10px;
    …
}

After implementing the code we have three buttons on the web page, they look pretty fine though they lack some texture that will produce much more interesting effect.

How you would have done it yesterday? You would have used Photoshop to draw all necessary effects, but now we have CSS blending. This makes the whole process much easier. Simply specify the blending mode on the element where you want to see the effect. In this case, you would add this to the CSS syntax of the button:

1
2
3

#textured-menu li {
 blend-mode: color-burn;
}

And you will get the following effect:

After applying the effect you the background becomes slightly visible through the buttons. The browser still knows that the button is a span with text so it is rendered with no artifacts and the text is still selectable.

The ‘blend-mode’ can be applied to any HTML or SVG element. It will take the complete rendering of this element and blend it with its background. Blending is fully compatible with all other CSS features such as opacity, animations and transitions. For instance if you use a CSS transition on the color in our example:

1
2
3
4

#textured-menu li:hover {
    background-color: red; 
    transition: background-color 0.15s linear;
}

Browser calculates automatically all intermediate steps during the transition phase. In addition to blend modes in CSS, the proposed specification also adds support for isolated and knockout groups. These are two advanced features that let you control precisely what elements blend with each other.

Where Can You Apply Blending?

The table depicts CSS keyword controls of blending within the CSS box model:

What’s More for CSS Blending?

Now the Adobe is working with browser vendors to see if they see any major architectural flaws in implementation of blending support. The guys from Adobe are looking forward to bring this technology to the web and can’t wait to see how designers will use it in new and innovative ways.