Will It Blend?

 

@dudleystorey

 

demosthenes.info

 

Web Design is about pixels

 

TRADITIONAL LIMITS:

 

rgb(a), hsl(a)

 

opacity

 

Blend modes

 

Text-wrap to shapes

 

CSS Regions

 

True drop-caps

 

mix-blend-mode

 

background-blend-mode

 

(blends background layers)

 

(blends arbitrary HTML elements)

 

darken modes

lighten modes

contrast modes

inversion modes

component modes

{

(opposites)

normal

Practical Application  1:

 

Monochromatic Color-Tinted Images

 

(Luminosity - Live coding FTW!)

 

Practical Application  2:

 

Automatic Text Contrast

 

(Difference)

 

Testing for support:

 
Modernizr.addTest("mix-blend-mode", function(){
    return Modernizr.testProp("mixBlendMode");
});
if ("CSS" in window && "supports" in window.CSS) {
    var support = window.CSS.supports("mix-blend-mode","difference");
    support = support?"mix-blend-mode":"no-mix-blend-mode";
    document.documentElement.className += support;
}
@supports (mix-blend-mode: difference) {

}

Practical Application  3:

 

Cross-Browser Text Masks 

 

(Darken / Lighten)

 

Practical Application  4:

 

Better Backgrounds & Overlays

 

(All modes)

 

Blend modes:

 
  1. Exemplars of progressive enhancement, when coded well.
 
  1. Reduce re-work
 
  1. Can't be animated, but will respond to changes in other properties and values.
 
  1. Creates many more creative possibilities for interaction of pixels
 

Browser support

30+

35+

7.1+ / iOS 8

(except

component modes)

Microsoft Edge support is “under consideration”

More time?

More resources, examples:

 

Thank you!

 

@dudleystorey

 

demosthenes.info

 

Will It Blend?

By Dudley Storey

Will It Blend?

Presented at the San Francisco CodePen meetup, July 2015

  • 2,166
Loading comments...

More from Dudley Storey