Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

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:


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.


Alex Bulat

Writing a blog post or building a micro niche WordPress website is something Alex can do bare-handed. You're welcome to contact him via Telegram, Facebook, or LinkedIn.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

12 responses to “Blend Well but Do Not Stir. CSS Blending Method by Adobe”

  1. … [Trackback]

    […] There you can find 21087 more Info on that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  2. … [Trackback]

    […] Read More Information here on that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  3. … [Trackback]

    […] Find More Info here to that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  4. … [Trackback]

    […] Info on that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  5. … [Trackback]

    […] Here you can find 56815 additional Info on that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  6. … [Trackback]

    […] Find More on that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  7. 링크집 says:

    … [Trackback]

    […] Read More to that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  8. relx says:

    … [Trackback]

    […] Read More to that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  9. … [Trackback]

    […] Read More here on that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  10. … [Trackback]

    […] Find More on that Topic: monsterspost.com/css-blending-effects-adobe/ […]

  11. Veronica says:

    Thank you; however, I see no actual examples of coded in to this post. I think this post would be top notch if you actually executed the code here. Thank you

  12. mob12 says:

    wow. i didn’t know that we could do blending with CSS. thanks for the tip. gonna use in my future projects

Leave a Reply

Your email address will not be published. Required fields are marked *