Extending CSS with Houdini

on YouTube ↗12m

" summary

Explains how the CSS Paint API lets developers write canvas-style paint worklets for backgrounds borders masks and more and demonstrates registering them with CSS.paintWorklet.addModule from unpkg or npm, using file-loader inside create-react-app, and animating via CSS keyframes. Shows concrete worklets — confetti sparkles static-gradient angled-corners — and that the Houdini Paint Polyfill (Jason Miller) makes them run across Chromium Safari and Firefox-in-consideration; links and examples live on houdini.how.

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 0:15Css Houdini
3. 1:15Css Paint
4. 1:38Css Paint Api
5. 2:40Is Houdini Ready
6. 3:14Inspiration
7. 3:38Reverse Border Radius
8. 3:51Powdered Gradient
9. 4:13Angled Corners
10. 6:08Keyframe Animation in Css
11. 9:37Static Gradient
12. 10:35Firefox
13. 11:19Submit a Resource

" related talks

• 24mHoudini the new CSS MagicKarsten Buckstegge · JSUnconf 2018
• 46mGetting extra with CSS HoudiniUna Kravets · Frontend United 2019
• 39mMake the Web Brighter with the CSS Paint APIVitalii Bobrov · GDG DevFest Poland 2018 in Wrocław
• 22mCSS HoudiniNegar Jamalifard · JSWorld Conference 2022
• 42mHow to Be #Extra with CSS HoudiniUna Kravetz · YGLF 2019: Code Camp
• 26mCSS Houdini & The Future of StylingUna Kravets · JSConf EU 2019
• 53mCSS Houdini - from CSS variables to JavaScript and backSerg Hospodarets · NDC Oslo 2017
• 27mMagic Tricks with HoudiniSamuel Richard · Nordic.js 2018