CSS Blend Modes, Because...
summary
Shows concrete techniques: apply CSS blend modes and filters plus SVG FEColorMatrix to recreate duotone and Instagram‑style filters, simplify things like knockout text, and drive live color swaps for e‑commerce. Case studies include a visual diff tool (Diffy) and CSS Graham. Browser support is mixed (Edge/IE missing, Safari partial) and progressive enhancement is required. Measured gains: removing color often saves ~17–23% of image size (examples 62 KB and 189 KB); profiling finds only fractional paint cost under heavy CPU slowdowns.
AI-written summary · about
chapters (24)
- 0:00Introduction
- 1:28New Job
- 2:48Agenda
- 3:24Caveats
- 4:51What are blend modes
- 5:26Multiply and Screen
- 9:30Diffie
- 10:19Component blend modes
- 11:45Gradient blend modes
- 12:42Uniformity
- 13:22Knockout Text
- 14:20Filters
- 15:41SVG Filter Effects
- 17:36Consistency
- 18:37Filter Effects
- 18:56Duotone
- 19:27Blend Mode
- 20:54Image Performance
- 21:56Black and White
- 22:27Contrast Swap
- 24:13Using Blend Modes
- 25:38Creativity
- 27:37Not the best solution
- 28:08In conclusion
