Preethi Sam

The new CSS sibling-index() (and -count()) functions are perfect for staggered timing affects. This goes a little step further staggering both before and after a selected element.

The article explains how to design and animate a *circular* menu (that rotates in a circle!) in CSS using offset and animation-composition.

A single button, but it has two different behaviors in JavaScript depending on how far you’ve scrolled in an element (as determined by CSS!)

Kinda like that “bento box” look.

Shadows don’t have to be used for… shadows. Inset shadows can layer over backgrounds and because they are animatable, it’s just another tool for drawing what we want to the page.

The & is a powerful addition to CSS, allowing us to craft selectors without repetition and helping organization and understanding.

Typically, buttons are either pressed or they aren’t. But as long as you handle it accessibly, you can make a group of radio inputs look like a multi-state button with some CSS trickery.

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.

CSS containment is used for optimization and opening styling possibilities by isolating elements from the rest of the page. Different contain values (size, paint, layout, etc.) provide various benefits and tradeoffs.

This article explores creating a typographic effect that “reveals” text in an interesting animated way.