• Drop-Shadow: The Underrated CSS Filter

    This article was updated on 13 August 2020 to include additional reference material.

  • From Gatsby to Eleventy: Choosing a Static Site Generator for a Personal Site

    There have been so many great personal site redesigns recently. Cassie’s, Jason’s and Josh’s are among my favourites, but there are plenty more flying under the radar. What characterises many of them is a certain playfulness, a resurgence of whimsy and delight. You can feel the love and care that has gone into them, the fact that their creators have carved out their little corner of the web to call home. Perhaps the pandemic situation, coupled with the popularity of Animal Crossing has something to do with this?

  • Irregular-shaped Links with Subgrid

    Card-based UIs are commonly-used web design patterns, and it’s not unusual to build a UI that requires a hover (or focus) effect to be applied to an entire card. There are a few strategies for implementing this effect using CSS, and this CSS Tricks article covers some of them. (None of them is perfect, and they all have their pitfalls!)

  • Mentoring

    This blog has been a little quiet over the past couple of weeks. With everything going on in the world right now, it doesn't feel like the right time to be sharing CSS tips, without acknowledging the real struggles of the people out protesting on the streets following the killing of George Floyd. Black people are literally fighting for the right to exist in a racist world.

  • CSS-only Slide-up Caption Hover Effect

    Have you ever needed to build a UI where a caption needs to slide over an image on hover, revealing more content?

  • All the CSS Colours

    I recently made a demo where I needed to list all the CSS named colours as options in a select input. I didn’t want to write them all out by hand, but the trouble was I couldn’t find just a list of all 148 colours anywhere as plain text.

  • Exciting Things on the Horizon For CSS Layout

    This past week has brought a few announcements from browser vendors of some exciting things that might have a big impact on CSS layout in the very near future.

  • Video: 90 Seconds on CSS Custom Properties

    Last year I spoke at Future Sync conference, and this year the organisers asked me if I could provide a short recorded introduction to a CSS topic. I put together a 90-second video on CSS custom properties, one of my favourite (relatively) recent CSS features, and thought I’d share it with you here.

  • Tips for Writing for the Web

    Writing for the web is a skill, like any other, that can only be perfected through practice. I’ve been writing on this blog for two years now, and creating content for other sites before that, and I like to think I’m pretty okay at it – though there are always ways to improve! In this article I’ll share a few tidbits of wisdom that I’ve acquired over the years, which might help you if you’re starting to blog, or even making the switch from writing for print.

  • Different Approaches to Responsive CSS Motion Path

    When it comes to using CSS Motion Path, it always bugs me that the path itself is doesn’t scale. The path size, as created, is essentially a fixed size, in pixels. It means that responsive design with Motion Path is a little tricky, and requires some workarounds.

  • Building an Interactive Timetable

    This week the UK joined many other parts of the world in imposing a lockdown to battle the coronavirus (AKA Covid-19), and so we find ourselves in a pretty weird situation, to say the least. I hope you’re all keeping safe and taking care of yourselves and your loved ones out there. My heart goes out to those who have been personally affected, and to the incredible NHS workers on the frontline, who are fighting daily battles and risking their own health to keep us safe.

  • Positioning Text Along a Path with CSS

    I’ve been playing around with CSS Motion Path a lot over the past couple of months, and having a lot of fun creating demos, some of which you can find in this Codepen collection. But the “Motion Path” name is a little misleading, as it doesn’t only relate to movement. In fact, although the specification still goes by the name “Motion Path”, the property used to define the path was changed from motion-path to offset-path. It’s easy to see why: an element can be placed anywhere along the path, with or without motion – its position (or offset-distance value) doesn’t have to be animated.