Preethi Sam

It’s not just vibes, it’s an accessibility thing.

The new CSS progress() function maps a given value to a range. Super useful for responsive layouts, responsive typography, and fun tricks.

“Liquid glass” design is helped along by offsetting/scaling the background as if you’re looking through real glass. But that gets tricky with arbitrary CSS background positioning.

Includes background-clip for masking backgrounds, vertical-align for aligning elements, box-decoration-mode for consistent edge styling, letter-spacing for spacing control, and text-combine-upright for vertical text layouts.

Here’s an example. You can list multiple comma-separated box-shadows, but if you apply a *new* box-shadow, it overrides anything set before. Not true here.

You might think of the view() function as used in scroll-driven animations, but really it just pairs @keyframes animation with the current position of an element.

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!