Custom Properties

We can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.

Set a variable in Pug, then create an inline script which sets that variable for using in JavaScript and use setProperty to pass it to CSS.

A “fan out” animation involves sequentially revealing items from a stack with a bouncy effect. By using CSS grid, we save quite a bit of fiddly positioning work.

Let’s look at using CSS as an efficient alternative to JavaScript for creating simple timers. We’ll use modern CSS properties like @property, @keyframes, and pseudo-elements with counter() values.