One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting height: 100% would have no effect at all. When I finally figured out what was going on, it was like a puzzle piece snapping into place; everything made so much more sense! In this post, I’ll share the epiphany I had, and we’ll explore some solutions.

A container query can contain viewport units, meaning you can compare the window vs the element and make choices.

Have you ever wished you could write simple CSS to declare a color, and then have the browser figure out whether black or white should be paired with that color? Well, now you can, with contrast-color().

What if you could take your CSS animations beyond simple fades and slides — adding an extra dimension and a bit of old-school animation magic? In this article, pioneering author and web designer Andy Clarke will show you how masking can unlock new creative possibilities for CSS animations, making them feel more fluid, layered, and cinematic.

Use the arc command within the shape() function we can draw a line that follows a circle from one point to the next, controlling the direction.