Creating Memorable Web Experiences: A Modern CSS Toolkit
I love the fact that CSS is finally reclaiming control over visual interactions, taking charge of the…
Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions
I’ve said one and meant another, and I’ve used one when I needed another. Please bear with…
Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions
I’ve said one and meant another, and I’ve used one when I needed another. Please bear with…
offset-path
The offset-path property in CSS defines a movement path for an element to follow during animation. This…
What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More
What’s !important #12 talks about the old (testing in Safari when you don’t have Safari), the new…
Using CSS corner-shape For Folded Corners
I came across Kitty Giraudel’s folded corners technique. It leverages CSS clip-path, and I thought that that…
Alternatives to the !important Keyword
Every now and then, I stumble onto an old project of mine, or worse, someone else’s, and…
Making Complex CSS Shapes Using shape()
Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such…
What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More
For this issue of What’s !important, we have a healthy balance of old CSS that you might’ve…
Interop 2026
Interop 2026 is formally a thing. So, you know all of those wild, new CSS features we’re…
Responsive Hexagon Grid Using Modern CSS
Five years ago I published an article on how to create a responsive grid of hexagon shapes….
The “Most Hated” CSS Feature: tan()
Last time, we discussed that, sadly, according to the State of CSS 2025 survey, trigonometric functions are deemed…
Getting Creative With Small Screens
Over the past few months, I’ve explored how we can get creative using well-supported CSS properties. Each…
Getting Creative With shape-outside
Last time, I asked, “Why do so many long-form articles feel visually flat?” I explained that: “Images…
Recreating Gmail’s Google Gemini Animation
I always see this Google Gemini button up in the corner in Gmail. When you hover over…
Getting Creative With Quotes
Block quotes and pull quotes are useful for punctuating solid blocks of running text. They’re also two…
Getting Creative With Versal Letters
A while back, our man Geoff Graham treated us to a refresher on the CSS initial-letter property,…
Scroll-Driven Sticky Heading
Scroll-driven animations are great! They’re a powerful tool that lets developers tie the movement and transformation of…
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…
CSS Blob Recipes
Blob, Blob, Blob. You hate them. You love them. Personally, as a design illiterate, I like to…
Breaking Boundaries: Building a Tangram Puzzle With (S)CSS
For years, I believed that drag-and-drop games — especially those involving rotation, spatial logic, and puzzle solving…
Better CSS Shapes Using shape() — Part 3: Curves
If you’re following along, this is the third post in a series about the new CSS shape()…
Better CSS Shapes Using shape() — Part 2: More on Arcs
Ready for the second part? We are still exploring the shape() function, and more precisely, the arc…
Better CSS Shapes Using shape() — Part 1: Lines and Arcs
Creating CSS Shapes is a classic and one of my favorite exercise. Indeed, I have one of…