What’s !important #5: Lazy-loading iframes, Repeating corner-shape Backgrounds, and More
This issue of What’s !important is dedicated to our friends in the UK (aka me), who are…
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…
What’s !important #2: Conditional View Transitions, CSS/SVG Text Effects, the Best of CSS Bluesky, and More
2026 is almost upon us. I know we’re all itching to see the clock strike midnight (cue…
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…
3D Layered Text: The Basics
Recently, a client asked me to create a bulging text effect. These are exactly the kinds of…
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,…
Setting Line Length in CSS (and Fitting Text to a Container)
First, what is line length? Line length is the length of a container that holds a body…
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…
Getting Creative With HTML Dialog
Like ’em or loath ’em, whether you’re showing an alert, a message, or a newsletter signup, dialogue…
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…
This Isn’t Supposed to Happen: Troubleshooting the Impossible
I recently rebuilt my portfolio (johnrhea.com). After days and days of troubleshooting and fixing little problems on…
Revisiting Image Maps
I mentioned last time that I’ve been working on a new website for Emmy-award-winning game composer Mike…
The Lost CSS Tricks of Cohost.org
You would be forgiven if you’ve never heard of Cohost.org. The bespoke, Tumblr-like social media website came and…
Next Level CSS Styling for Cursors
The cursor is a staple of the desktop interface but is scarcely touched by websites. This is…
SMIL on?
I was chatting with Andy Clarke the other day about a new article he wants to write…
Revisiting CSS border-image
In my last article on “Revisiting CSS Multi-Column Layout”, I mentioned that almost twenty years have flown…
Powering Search With Astro Actions and Fuse.js
Static sites are wonderful. I’m a big fan. They also have their issues. Namely, static sites either…
A CSS-Only Star Rating Component and More! (Part 1)
Creating a star rating component is a classic exercise in web development. It has been done and…
Handwriting an SVG Heart, With Our Hearts
According to local grocery stores, it’s the Valentine’s Day season again, and what better way to express…