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.

🎩 Houdini, ain't that a magician?

Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.

It really is magic, hence it's name Houdini. I'd recommend this slidedeck and this video to get you started

If you’re interested into making your first Paint Worklet with Houdini, you can easily follow along with the article/tutorial.

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 the other CSS properties — the circles are being drawn, at random places with random colors.

Sometimes this side-effect is unwanted: say you have a Paint Worklet that draws some random lines underneath an element. If you were to animate the --line-width on hover you don’t want it to draw different lines, but you want to keep the same lines in place, and only adjust their width.

To solve around this, Jake Archibald shows us how to implement mulberry32, which has consistent output no matter how many times you call it:

Computers can’t really do random. Instead, they take some state, and do some hot maths all over it to create a number. Then, they modify that state so the next number seems unrelated to the previous ones. But the truth is they’re 100% related.

If you start with the same initial state, you’ll get the same sequence of random numbers. That’s what we want – something that looks random, but it’s 100% reproducible.

Go check out the demos Jake has built. As per usual these are top-notch, and help explain everything well.

CSS paint API: Being predictably random →

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.

🎩 Houdini, ain't that a magician?

Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.

It really is magic, hence it's name Houdini. I'd recommend this slidedeck and this video to get you started

As a user you can configure the number of circles, the size range, the opacity range, and the colors to use. In true Houdini style these are all configured using CSS Custom Properties.

.element {
    --colors: #f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e;
    --min-radius: 20;
    --max-radius: 100;
    --num-circles: 30;
    --min-opacity: 10;
    --max-opacity: 50;

    background-image: paint(circles);
}

~

Here’s a CodePen demo for you to play with:

(Hit “Edit on CodePen” and change the CSS Custom Properties to your liking)

~

What first started out as a demo on CodePen, eventually led to me creating and publishing it as a package on NPM.

npm install css-houdini-circles

Furthermore I also created a pull request to add the site to the Houdini.now website. I was quite surprised to learn it already got merged and is already published on the website 🙂

~

Feel free to fork the repo to have a starting point to creating your own Paint Worklet. If you know how to work with HTML canvas, I’m confident you’ll find it very easy to do so.

css-houdini-circles source (GitHub) →
css-houdini-circles on npm →

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 well as how to use them cross-browser with the Houdini Paint Polyfill. Also learn about a new resource to help you quickly get started with exploring Houdini in your own projects today.

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 they each work on all modern browsers. Give it a whirl!

Cross-browser paint worklets and Houdini.how →
Houdini.how →

🎩 Houdini, ain't that a magician?

Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.

It really is magic, hence it's name Houdini. I'd recommend this slidedeck and this video to get you started

Related:

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 the browser how to apply CSS during a render process.

Houdini’s browser support is improving and some APIs are available for use today, so it’s a good time to become familiar with them and experiment. We are going to take a look at each part of Houdini, its current browser support and see how they can be used today using progressive enhancement.

Smashing Magazine: A Practical Overview Of CSS Houdini →

🖥 New to Houdini and not a big fan of all that text? This 2018 Houdini Slidedeck by Ibe Vanmeenen was very nice to see.

📈 Now’s a good time to compare Is Houdini Ready Yet‽ with the version from 2016. That’s a lot of green that got added since then 🙂

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 expand and polypill language, all while keeping the performance at an up-high. All hail Houdini!

The talk itself has a very nice build-up, and Ibe’s a great speaker. Highly recommended!

Demystifying the future of CSS with sparkles of JS →

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 basic one. Typed OM however contains way more stuff. Here’s a few examples:

// CSSUnitValue objects
const {value, unit} = CSS.number('10');
// ~> value === 10, unit === 'number'

// CSSMathValue objects
new CSSMathSum(CSS.vw(100), CSS.px(-10)).toString();
// ~> "calc(100vw + -10px)"

// Basic Arithmetic operations
CSS.percent(50).max(CSS.vw(50)).toString()
// ~> "max(50%, 50vw)"

// Conversions
el.attributeStyleMap.get('width').to('mm');
// ~> CSSUnitValue {value: 132.29166666666669, unit: "mm"}

// …

With the Paint API already being shipped (and more stuff on its way), Chrome is leading the pack when it comes to Houdini support:

Really looking forward to more Houdini features/support, as it will change everything (see these cool experiments for example).

Working with the new CSS Typed Object Model →

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 it.

CSS Houdini Experiments →