Preethi Sam

You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.

Fixed and sticky positioning behave very differently, but we can switch between the two at exact points for some unusual looking effects.

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.