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…