Thursday, January 09, 2014

CSS Blend Modes could be the next big thing in Web Design

CSS Blend Modes could be the next big thing in Web Design
Cool-looking things that are difficult or downright impossible to replicate in CSS right now. Top row: Doublenaut, Graham Hicks, Jonathan Quintin and Geoff Teehan. Bottom row: Ben Johnson, Claire Morales, Alan Defibaugh and Jess Barlow

For everyone who has ever opened Photoshop or Illustrator you are most likely familiar with blend modes. Multiply, screen, overlay and soft light, to name a few can turn boring opaque layers into beautiful pieces of stained glass. However, what awesome "blend modes" do web designers have at their disposal for making websites beautiful? Opacity. Yep, that's it.

Blend modes and the web

It's a shame that we couldn't have had more blend modes to work with when the opacity property gained widespread support across browsers, but it turns out that ensuring Photoshop-like blend modes render uniformly across different browsers and implementations is no easy task. Some blend modes have been available in SVG through filters, but these are limited and don't see much use in the real world.

Despite this, things are changing fast and there is a draft specification titled CSS Compositing and Blending. Blend modes in CSS are being promoted heavily by Adobe Web Platform team (along with other interesting features like CSS regions and shaders).

Right now, the specification brings three brand new properties to CSS, background-blend-mode, mix-blend-mode and isolation. Let's explore!

Canvas 2D: Will it blend?

CSS Blend Modes could be the next big thing in Web Design - Canvas
Particles by Justin Windle.
Blend modes make this awesome demo really pop

First, here's a little secret, blend modes are now available for use with HTML5 Canvas in all the latest browsers except Internet Explorer. They are even supported on mobile Safari and Chrome. However, why should we stop there? Blend modes would be incredibly useful in CSS.

Blending in CSS: Say hello to background-blend-mode

CSS Blend Modes could be the next big thing in Web Design
Sixteen blend modes are coming to CSS. Demo.

The new background-blend-mode property allows you to specify blending between background layers of an element. Whether it be between an element's background-color and background-image, or a background-image CSS gradient, background-blend-mode mixes all the backgrounds together with the blend mode(s) you specify.

CSS Blend Modes could be the next big thing in Web Design
Medium even uses blend modes in their articles. Too bad our friend CSS isn't there to make this process a lot faster and easier.

Don't think this property would get much use? Don't go further than the website you're on right now. When uploading full-page backgrounds to an article, Medium gives you the option to apply a color to the background to make the title stand out a bit more. However, because browsers don't have blend modes in CSS, Medium has to do this the slow and costly way. They make six copies of the image you upload with different colors applied to each one, a process done on the server side. For the reader, this method is a lot slower than it could be with background-blend-mode. This new property could also be utilized elsewhere:

CSS Blend Modes could be the next big thing in Web Design - The Verge
The Verge's website is unique partly because of the pseudo blend modes they apply on their headlines. background-blend-mode could likely be used to make these kind of effects even better.

The super duper mix-blend-mode property

While background-blend-mode is strictly for blending backgrounds, we'd ideally also like to blend HTML and SVG elements like layers on a .psd. Fortunately, that is where the mix-blend-mode property comes in.

mix-blend-mode will blend elements with their backdrop. Perhaps you could experiment with a header that utilizes the screen blend mode rather than a simple background color with rgba(). There are also probably an infinite number of possibilities with loading animations and blend modes. The isolation property stops elements with mix-blend-mode from blending with the backdrop.

Implementation of the mix-blend-mode property is more complex than background-blend-mode so it is taking a bit more time, but don't let that get you down. Blend modes will be here soon!

Can I use blend modes now?

Not yet, but I would expect in 2014 you could be able to start. The specification has already been approved by the SVG working group and it needs approval from the CSS working group also to become a Candidate Recommendation. Once this happens soon, you can expect browsers to start shipping blend modes to browsers.

As for implementation, here's a brief summary: (Early January 2014)

  • Firefox: Implements background-blend-mode in version 29 but with bugs (see this demo) which they are working on. The mix-blend-mode property can be enabled in about:config.
  • Safari: Implements background-blend-mode in Webkit Nightly. Not mix-blend-mode.
  • Chrome and Opera: mix-blend-mode and background-blend-mode can be enabled in chrome://flags or opera://flags under "Experimental Web Platform Features".
  • Internet Explorer: Doesn't even support blend modes in Canvas. Can't find any info on current development of CSS blend modes.

Learn more