Filter Effects & Blend Modes
summary
CSS adds three kinds of filters — built‑ins, SVG primitives and custom GLSL‑style shaders — with built‑ins already in Chrome 18 / Safari 6 and SVG filters usable via URL. Demos use GLSL shaders and WebGL-style processing, show GPU acceleration for animated filters (no repaint or layout), and a custom‑filter prototype that bends HTML but is not yet production ready. Blend modes arrive as mix‑blend‑mode and background‑blend‑mode, restricted by stacking contexts and isolation to keep results performant.
AI-written summary · about
chapters (39)
- 0:00Introduction
- 1:50Filter Effects
- 2:47Filters Specs
- 3:03What is Filter Effects
- 3:29Syntax
- 3:52Filter Demo
- 4:24Blur
- 4:49How Filters Work
- 5:30Stacking Context
- 8:53Custom Filters Demo
- 11:37Hue Rotate
- 12:56Drop Shadow
- 13:28Box Shadow vs Drop Shadow
- 13:48Box Shadow Optimization
- 14:43Drop Shadows
- 16:03Standard Deviation
- 16:55SVG Filters
- 18:02Browser Compatibility
- 18:26Builtin Filters
- 20:40Demo
- 21:50Blend Modes
- 23:13Blend Mode Values
- 23:36Source Elements
- 23:59Backdrop
- 24:24Mixed Blend Mode
- 25:06StackingContext
- 26:50Isolate Example
- 28:17Mix
- 28:33Background Blend Mode
- 29:00Example
- 30:15Blending
- 31:14Why Blend
- 32:26Feedback
- 33:35Security concerns
- 34:35Shaders
- 35:03Style
- 36:01Shader
- 37:09Filter Lab
- 38:12How will this develop
