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:
- Exemplars of progressive enhancement, when coded well.
- Reduce re-work
- Can't be animated, but will respond to changes in other properties and values.
- 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?
Multilayer Effects (w/ Clip Masks)
http://demosthenes.info/blog/1012/MultiLayer-Effects-With-CSS-Clip-Paths-Filters-and-Blend-Modes
3D Glasses:
http://demosthenes.info/blog/1014/3D-Glasses-with-CSS-Blend-Modes
Blend mode for better product photos:
http://demosthenes.info/blog/974/Using-CSS-mix-blend-mode-for-Better-Product-Photos
More resources, examples:
http://demosthenes.info/blog/css/blend-modes
Yoksel: http://codepen.io/collection/fEkjb/
Bennett Feely: http://codepen.io/collection/Kgshi/
Gregor Adams: http://codepen.io/pixelass/pen/OPQqgr
Thank you!
@dudleystorey
demosthenes.info