Over at Codrops, Georgi Nikolov digs into Houdini’s Paint API and the Properties and Values API along with that. Recommended, as it’s all well explained and easy to follow along. Drawing Graphics with the CSS Paint API → Related: css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles →
Tag Archives: houdini
Animating Text Underlines
Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results. This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled …
Building Future UIs
The folks over at Formidable have been experimenting with Houdini and WebGL/Three.js to create futuristic UIs Futuristic sci-fi UIs in movies often support a story where humans, computers, and interfaces are far more advanced than today, often mixed with things like super powers, warp drives, and holograms. What is it about these UIs that feel …
Simulating Drop Shadows with the CSS Paint API
Steve Fulghum takes a look at how we can use Houdini’s Paint API to paint a complex shadow. See the Pen Simulating Drop Shadows with the CSS Paint API by Steve Fulghum (@steve_fulghum) on CodePen. If you’re interested into making your first Paint Worklet with Houdini, you can easily follow along with the article/tutorial. Simulating …
Continue reading “Simulating Drop Shadows with the CSS Paint API”
Creating random-but-stable effects with the CSS Paint API
One of the side-effects when drawing things with a Houdini Paint Worklet and relying on Math.random() in your code, is that your layout might be jumpy. Check out my CSS Houdini Paint Worklet that draws colorful circles for example: whenever you resize the available space or change one of its properties — or some of …
Continue reading “Creating random-but-stable effects with the CSS Paint API”
css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles
Last night — inspired by the Paint Worklet demos on Houdini.how — I decided to give Houdini a spin myself and created my own Paint Worklet. The result is css-houdini-circles which draws a bunch of random circles on the background. As a user you can configure the number of circles, the size range, the opacity …
Extending CSS with Houdini
In this video from #ChromeDevSummit 2020, Una walks us through Houdini and the aforementioned houdini.how CSS Houdini is an umbrella term that describes a series of low-level browser APIs and worklets which enable developers to hook into the browser’s rendering engine and extend the styling capabilities of today. Learn about the various Houdini API’s, as …
Supercharging your CSS with Houdini Paint Worklets
During #ChromDevSummit, Houdini.how got announced: Houdini.how is a library and reference for Houdini worklets and resources. It provides everything you need to know about CSS Houdini: browser support, an overview of its various APIs, usage information, additional resources, and live paint worklet samples. Each sample on Houdini.how is backed by the CSS Paint API, meaning …
Continue reading “Supercharging your CSS with Houdini Paint Worklets”
Wash your hands with the CSS Paint API
Mariko Kosaka has created a small PWA that fills your screen with water over a duration of 20 seconds. After first using CSS animations to animate the water (video), she eventually turned to Houdini‘s CSS Paint API Wash your hands for 20 seconds →
A Practical Overview Of CSS Houdini
Adrian Bece writing for Smashing Magazine: Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell …