What’s !important #6: :heading, border-shape, Truncating Text From the Middle, and More
Despite what’s been a sleepy couple of weeks for new Web Platform Features, we have an issue…
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design
I got this interesting question in an SVG workshop: “What is the performance difference between an SVG…
Potentially Coming to a Browser :near() You
Just before we wrapped up 2025, I saw this proposal for :near(), a pseudo-class that would match…
Spiral Scrollytelling in CSS With sibling-index()
Confession time: I’ve read about the performance benefits of scroll-timeline(), but when I see an impressive JavaScript…
What’s !important #4: Videos & View Transitions, Named Media Queries, How Browsers Work, and More
Neither Chrome, Safari, nor Firefox have shipped new features in the last couple of weeks, but fear…
Postcard From Web Directions Dev Summit, 2025
Author’s Note: There are already wonderful recaps of the Web Directions Developer Summit I spoke at in…
Thank You (2025 Edition)
If I had to whittle down my favorite thing about CSS-Tricks to one thing — and like…
text-decoration-inset is Like Padding for Text Decorations
The text-decoration-inset CSS property solves a problem that we’ve had since the beginning of the web, which…
Responsive List of Avatars Using Modern CSS (Part 2)
Ready for the second part? If you recall, last time we worked on a responsive list of…
Responsive List of Avatars Using Modern CSS (Part 1)
A list of rounded images that slightly overlap each other is a classic web design pattern. You…
Creating Scroll-Based Animations in Full view()
The CSS animation-timeline property accepts a view() function which, in turn, returns a timeline of how much…
Scrollytelling on Steroids With Scroll-State Queries
Read you a story? What fun would that be? I’ve got a better idea: let’s tell a…
CSS Animations That Leverage the Parent-Child Relationship
Modern CSS has great ways to position and move a group of elements relative to each other,…
Sequential linear() Animation With N Elements
Let’s suppose you have N elements with the same animation that should animate sequentially. The first one,…
Touring New CSS Features in Safari 26
A couple of days ago, the Apple team released Safari 26.0! Is it a big deal? I…
Recreating Gmail’s Google Gemini Animation
I always see this Google Gemini button up in the corner in Gmail. When you hover over…
CSS Typed Arithmetic
CSS typed arithmetic is genuinely exciting! It opens the door to new kinds of layout composition and…
The “Most Hated” CSS Feature: cos() and sin()
No feature is truly “the worst” in CSS, right? After all, it’s all based on opinion and…
What You Need to Know About CSS Color Interpolation
Color interpolation, loosely speaking, is the process of determining the colors between two color points. It allows…
CSS Elevator: A Pure CSS State Machine With Floor Navigation
As a developer with a passion for state machines, I’ve often found myself inspired by articles like…
A Radio Button Shopping Cart Trick
Editor’s note: This is a really clever idea that Preethi shared, but you will also see that…
3D Layered Text: Interactivity and Dynamicism
In the previous two chapters, we built a layered 3D text effect, added depth and color, and…
3D Layered Text: Motion and Variations
In the previous chapter, we built a basic 3D layered text effect using nothing but HTML and…
3D Layered Text: The Basics
Recently, a client asked me to create a bulging text effect. These are exactly the kinds of…