Issue 109  July 11th 2025

A guide to Scroll-driven Animations with just CSS

CSS animations have come a long way since Apple first introduced them to the web in 2007. What started as simple effects like animating from one color to another has turned into beautiful, complex images twisting and flying across the page.

But linking these animations to user behavior like scrolling has traditionally required third-party libraries and a fair bit of JavaScript, which adds some complexity to your code. But now, we can make those animations scroll-driven with nothing more than a few lines of CSS.

Better CSS Shapes Using shape() — Part 4: Close and Move

This is the fourth post in a series about the new CSS shape() function. So far, we’ve covered the most common commands you will use to draw various shapes, including lines, arcs, and curves. This time, I want to introduce you to two more commands: close and move. They’re fairly simple in practice, and I think you will rarely use them, but they are incredibly useful when you need them.

:nth-last-child

Select elements by counting backwards from the end using the :nth-last-child pseudo-class selector.

CSS Intelligence: Speculating On The Future Of A Smarter Language

CSS has evolved from a purely presentational language into one with growing logical powers — thanks to features like container queries, relational pseudo-classes, and the if() function. Is it still just for styling, or is it becoming something more? Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the challenges it addresses, whether it is becoming too complex, and how developers are reacting to this shift.

Tailwind is the worst form of CSS, except for all the others

I think there’s a reason that every Tailwind take is spicy. It’s that Tailwind is a tool with strong opinions. Some developers find these opinions unnecessary, or even abrasive. Others find themselves and their teams way more productive.

After years of using it in production, I’m definitely in the “more productive” camp… but I get it. I get why it feels unnecessary if you’re comfortable with CSS. I get why Tailwind’s opinions come across as abrasive. And I’m not here to change your mind. But maybe I can offer you a fresh perspective.

Get the index of an element within its parent

With CSS, you can use the new sibling-index() function to get the position of any element relative to all its sibling elements. You can also rely on sibling-count() to get the number of siblings.

@property - Register custom CSS properties with specific syntax to enable smooth animations and transitions

The @property at-rule allows us to register custom CSS properties with specific syntax. This opens up being able to animate the values of custom properties, which can make previously unanimateable things, well, animated.

Without @property, custom properties are treated as strings because value, or values, you’d use are valid. By registering them, we tell CSS what the value is, such as a number, which is animateable.