mm

November 11, 2015 WATB Team
Follow me on Twitter

All the time, we’re seeing more and more CSS features that are giving us capabilities much more inline with what designers are able to achieve with Photoshop. Blend modes are one of these, we have had blend modes in Photoshop and other image editing software for decades, but only relatively recently have they been added to the CSS Spec. This excellent CSS-Tricks article covers the different properties in detail – but for this specific post I’ll be using mix blend modes – written as the declaration “mix-blend-mode”.

Specifically, mix-blend-mode describes how an element should blend with the element below it and its background. Background blend (background-blend-mode) is different as that describes how multiple backgrounds, including colours, of the same element should blend.

I stumbled upon a post on Dribbble by a designer called Balraj Chana. The design clearly uses blend modes heavily to achieve its visual look. Normally, this would have been difficult to achieve in browser – perhaps you’d need to use multiple layered PNGs with transparency. Or you may have had to just splice the images. Whatever technique you’d have used though, I’d say that achieving his level of design would have been nigh on impossible. Perhaps with Flash…

I set myself the challenge of re-creating Balraj’s design, in browser, with CSS only using the new mix-blend-mode property. Without access to the original file, there was a lot of guesswork involved. To keep the challenge reasonable, I only set out to recreate the second panel “Compare”. I also didn’t have any of the original images, so I had to source and cut out my own. Sadly, Balraj also appears to be using a font which I’d have to pay to buy and use. For the purpose of what I was trying to achieve, I skipped this and used Lato.

Into the code

The design uses a lot of gradients, so this was the first part I looked at having set out a structure:

See the Pen Nike CSS by brightonmike (@brightonmike) on CodePen.

With help from a Compass mixin, I started adding them to each element. I then had to experiment with the different mix-blend-mode properties to get the closest look to the original design I could manage. Unfortunately, there are still some that you can use in Photoshop that are not available in CSS yet. Altogether, throughout the code I used five different blend modes. Without them, the design ends up looking extremely flat and doesn’t have any of the depth or visual detail of the original design.

With a little jQuery help, I then animated the progress bars, using a data attribute to control their widths.

See the Pen Nike CSS by brightonmike (@brightonmike) on CodePen.

End result

Check the codepen (only tested in Chrome) and you’ll see how I achieved the end result, and how close I got to the original design. What this challenge really goes to show is how close CSS is getting to Photoshop – and it’s possible that the new blend properties will usher in the next design trend, shunning the flat feel of recent years for a more colourful and vibrant look much like Balraj Chana’s design.

View the demo

mixblendmode-code

Looking for more tips?

Jump on our mailing list & get digital goodness straight to your inbox; including helpful tips, tricks and the latest articles surrounding marketing, web design and branding.

Sign up →