Preethi Sam

Using @counter-style for tricky visual effects like word rotation and obfuscation.

@counter-style is useful for replacing the ::marker of lists easily, but it controls any markers-of-counters, so we can use it for more.

We look at designing callout UI elements using CSS, incorporating leader lines and text boxes. It details setting up the HTML structure, utilizing CSS properties like offset-path and borders.

:nth-child supports the keyword `of` in the argument which can be super useful on it’s own. Combo that with a :has() selector to do some pretty wild stuff!

Even if you nest details elements, you can ensure only one level of them is open at a time, making a menu you can drill down (and up!) from.

We can take a value set in an HTML attribute and use it in CSS, even extracting each individual digit in order to animate separately.

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.