Blend modes, long a part of SVG and Adobe products like PhotoShop, are finally making their way to native support in browsers via CSS. While they are some of the most promising and visually exciting aspects of modern web development, blend modes can also be difficult to understand; thus, this reading list, which emphasizes exploration via practical examples.

Goals: Apply CSS blend modes to web page backgrounds and content

Time: 3 hours

Prerequisites: Basic CSS (including selectors, text, images and animation). Some experience in PhotoShop will likely be helpful.

As CSS blend modes are quite new and are yet to have their potential fully explored, this reading list will feature additions in the very near future; I’ll always provide notification of major updates via Twitter.

Goals

1. Understanding Blend Modes
2. Darken & Lighten
3. Tinted Images w/ Blend
4. Animating Blend Modes
5. Animating Image Changes
6. Using Blends For Products
7. Multilayer Effects
8. 3D Glasses w/ Blend Modes
9. 3D Glasses w/ Blend Modes
10. Automatic Text Contrast
11. Text Masks
12. Better Backgrounds
13. More Text Effects
14. Diagrams w/ SVG & Blend Modes
15. Scribble Image Reveal
16. Better Borders w/ Blend Modes
17. Fullscreen Background Video w/ mix-blend-mode

Photograph by Loïc Lagarde used under a Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.