Creative Digital Media

History is recorded moments in life. People’s thoughts, either great among others or just great in their own shadow. Every glimpse of life at that just moment, deserves to be treasured. So just “Keep That Thought”…

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

By Templatemonster.com Written by Alex Bulat

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.

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

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

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

How to Apply Blending to Your Web Page Elements

Let’s consider a specific example.

Blend Well but Do Not Stir. CSS Blending Method by AdobeThe 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:

Blend Well but Do Not Stir. CSS Blending Method by AdobeAfter 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:

Element CSS Keyword
CSS box’s text or children foreground-blend-mode
text drop shadow text-shadow-blend-mode
CSS box’s background images background-blend-mode
CSS box’s shadow box-shadow-blend-mode
Complete CSS box blend-mode

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on August 23, 2012 by in Web Design and tagged , , , .