CSS Custom Properties
summary
Shows how CSS custom properties act as live, updatable variables used for theming, layout and animation: implements dark mode by redefining five root variables with prefers-color-scheme, builds a 24‑column grid driven by a --cols property, computes complementary HSL colors by adding 180°, and positions/animates text and elements along an offset-path using per‑element index variables. Demos use JavaScript via element.style.setProperty, the library splitting.js, Houdini-registered properties for smooth gradient transitions, and a working zigzag generator and Fibonacci layout. IE11 requires polyfills.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 1:04What are custom properties
- 4:13Dynamic nature of custom properties
- 6:16Dark mode with custom properties
- 7:40Vertical rhythm and spacing
- 9:51HSL color theming
- 11:37Relative custom properties
- 13:03Scoped custom properties
- 14:51Custom properties with CSS Grid
- 16:17Feature queries and support
- 16:39Staggered animations
- 17:44Progress visualization
- 19:09Text animations
- 20:53CSS Motion Path basics
- 22:19Positioning elements on paths
- 24:25Advanced motion path demos
- 25:30JavaScript manipulation of properties
- 27:15Inspiration and resources
- 27:56Q&A session
related talks
01h 03mCSS Variable Secrets
38mDemystifying CSS Custom Properties
18mDemystifying CSS Custom Properties
53mCSS Houdini - from CSS variables to JavaScript and back
53mCSS Houdini - from CSS variables to JavaScript and back
40mData-Driven CSS with Grid & Custom Properties
59mKeynote: CSS Variables: var(--subtitle);
59mCSS Variable Secrets