Brought to you by
by Jake Archibald Dec 11, 2020
If you're using a browser that supports the CSS paint API (which you are), the element will have a 'random' pixel-art gradient in the background. But it turns out, doing random in CSS isn't as easy as it seems...
by @Una July 21, 2020
The Properties and Values API supercharges your CSS custom properties (also commonly referred to as CSS variables) by giving them semantic meaning (defined by a syntax) and even fallback values, enabling CSS testing.
by Lisi Linhart July 1, 2020
An article where we can see a detailed performance comparison between the CSS painting API versus the new CSS Houdini Paint API.
by @Una April 27, 2020
This post is a study on selective color, by using CSS custom properties, a little bit of JavaScript, and some progressive enhancement with CSS Houdini.
by W3C March 19, 2020
The full set of CSS-TAG Houdini Editor Drafts. Current drafts include Box Tree API 1, Animation Worklet 1, Layout API 1, Painting API 1, Parser API 1, Properties and Values API 1, Typed OM 1, Typed OM 2, Font Metrics API 1, and Worklets 1.
by Adrian Bece March 19, 2020
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.
by Josh W. Comeau January 13, 2020
A great example to do awesome effects with animation background gradients using the custom properties and Paint API, and an implementacion in React with a Hook.
by Ruth John Nov 20, 2019
I help write technical documentation and one feature I’ve been writing about this year that has really stood out is the Typed Object Model (or Typed OM). If you haven’t come across it yet you would be forgiven as it’s pretty new.
by Estelle Weyl October 2, 2019
An overview of CSS Houdini capabilities and APIs on the Mozilla Developer Network. This series of articles goes over the advantages of Houdini, its various APIs, and other topics.
by Ana Tudor March 15, 2019
I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts.
by Surma Octiber 1, 2018
Animation Worklet allows you to write imperative animations that run at the device's native frame rate for that extra buttery jank-free smoothness™, make your animations more resilient against main thread jank and are linkable to scroll instead of time.
by Ana Tudor August 13, 2018
I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single <circle></circle> element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge.
by Vitalii Bobrov May 30, 2018
CSS Properties and Values API is the part of Houdini project that allows you as developer create own variables to use later in your styles. The idea behind them is pretty similar to variables we have for many years in SASS, LESS or Stylus.
by Sam Richard April 10, 2018
Built for one of Sam's talks on CSS Houdini, the Houdini Spellbook guides you through various Houdini APIs with interactive demos.
by Vitalii Bobrov March 18, 2018
CSS Paint API is the first part of the Houdini project that is available in the stable version of the browser. It Google Chrome team added it to Chrome 65 on March 6th. That is why it is an excellent time to try it out and start experimenting. I want you to get started and start own experimenting with it.
by Eric Bidelman March 1, 2018
The new CSS Typed Object Model (Typed OM), part of the Houdini effort, expands this worldview by adding types, methods, and a proper object model to CSS values. And in this article Eric explane it through some great examples and comparing it with the current CSSOM.
by Dan Wilson February 12, 2018
Houdini has been discussed here and there for a few years now, always with the promise that it will open doors we have never had. Want to make a new way to do layout? Houdini. Want to create a new kind of gradient? Houdini.
by Surma May 19, 2016
The Houdini task force consists of engineers from Mozilla, Apple, Opera, Microsoft, HP, Intel and Google working together to expose certain parts of the CSS engine to web developers with the goal to get them accepted by the W3C to become actual web standards.
by Surma
Sample repo of Houdini paint, layout, and animation demos from the Google Chrome Labs team.
by Joan Leon
A set of CSS Houdini experiments, including some interactive samples with CSS Paint API and Animation Worklet.
by @Una
A CSS Houdini library for making your site a little more #extra
by @iamvdo
A set of experiments with the latest CSS Houdini Spec by Vincent de Oliveira, including animated text effects, element queries, path layout, and many more.