CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our keyframe animations so much more reusable and dynamic! 🤯

A quick video showing you how to apply very little CSS to get that nice, revealing from the bottom effect on your footer.

There are several different ways to do equal width columns. But some are, uh, more equal than others.

In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked. The second approach achieves the same functionality using the new View Transition API.

This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.