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 →
Tag Archives: houdini
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 […]
Demystifying the future of CSS with sparkles of JS
At the recent JSConf.be conference here in Belgium, Ibe Vanmeenen gave a very nice talk introducing Houdini. CSS as a language is at the brink of a great revolution. Once such a closed and magical language, it will open up to you and your creativity in all it's glory. CSS will become an easy to […]
Working with Houdini’s new CSS Typed Object Model (Typed OM)
Chrome 66 will add support for Houdini’s Typed OM. Eric Bidelman from Google has documented how we can use this. CSS now has a proper object-based API for working with values in JavaScript. The days of concatenating strings and subtle bugs are over! The example shown above merely defines a value and is quite a […]
CSS Houdini Experiments
At the very end of the Say Hello to Houdini and the CSS Paint API article there’s only a small mention of this site. However it’s that great that it’s worth a link/post on its own. ⚠️ Be sure to use Chrome Canary – with “Experimental Web Platform features” enabled via chrome://flags – when visiting […]
Say Hello to Houdini and the CSS Paint API
With the CSS Paint API already being available in Chrome 65 and the CSS Layout API on its way it’s a good time to look at Houdini again. Say Hello to Houdini and the CSS Paint API → Related: This talk by Sam Richard: Magic Tricks with CSS Houdini
CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!
Oh yeah, the CSS Paint API will be enabled by default in Chrome 65: CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with url() to load an image file or with CSS built-in functions like linear-gradient(). Instead of […]
Sam Richard: Magic Tricks with CSS Houdini
Recording of Sam Richard talking at ColdFront17 about the aforementioned Houdini: This talk will focus on the working being done by the CSS Houdini Task Force to provide us with the ability to extend the browser’s render engine with JavaScript, above and beyond simply running JS on the main thread or a web worker.
Is Houdini ready yet‽
“Is Houdini ready yet‽” is a dedicated page to tracking the status of Houdini. But what is Houdini? Here’s a snippet from Smashing Magazine: Imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. […]