CSS

Here’s a brand new approach to creating staggered animations in CSS using a single progress value, allowing for smooth linkage to various inputs like scrolling. By utilizing a mathematical formula, it enhances control over animated elements without isolating their timelines, making animations more versatile and scrubbable.

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.

Personally, I wouldn’t blame you if you were asked what CSS needs these days and you were like uhm, I think it’s good, actually. These days CSS probably has more in it than you even know about or have tried, making it feel not particularly lacking. But if you really dig into the specifics, you’ll […]

You can style the “on the way in” and “on the way out” styles for elements, even when they are moving to/from display: none;. Yay.

There are quite a few “gotchas,” developers face when getting into the new @function syntax of CSS. Some are getting addressed!

There is no `anchor` attribute in HTML, it was decided CSS `anchor-name` / `position-anchor` was the way to go. But modern CSS functions can get us there anyway.

Una Kravets: Creating non-standard shapes on the web, like a speech bubble or a heart have typically required you to cut off your actual borders with clip-path. […] This is where border-shape comes in. It’s a powerful upcoming CSS primitive that defines a custom shape for an element’s border. Welp, clip-path() had a good run. I’ll always be fond […]

This time we get into very smooth starts and stops for infinite animations using CSS. One of the tricks is layering on a transition on top of an animation.

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.