Yours truly over at the Smashing Magazine: “CSS relative colour values are now widely supported. In this article, pioneering author and web designer Andy Clarke shares practical techniques for using them to theme and animate SVG graphics.”
Although we’ve had a smattering of snow here in the Rhineland—where I’m basing myself for a couple of months—at home, an “arctic blast” means snow is threatening. Last week, I added a snow mode to my websites, but my pioneer characters still looked toasty and warm, and unaffected by the wintery conditions. So, it was time for them to get chilly.
I redesigned my contact page animation as a gold mine scene. Here’s how I approached the artwork, structured the SVG, and added subtle ambient animation using CSS.
Winter’s definitely arrived, and there’s a chill wind blowing. We haven’t had snow in the village yet, but it’s falling on my website, courtesy of a new ‘snow mode.’
Yours truly over at the Smashing Magazine: “In this article, pioneering author and web designer Andy Clarke shows his techniques for creating Toon Text titles using modern CSS and SVG.”
I mentioned last week that as well as expanding my Toon Text styles gallery, I’d added a Toon Text generator to help me (and you) create text in the style of those classic cartoon title cards. Now, I’ve launched a major update to both.
Partway through writing an upcoming article for Smashing Magazine, I decided it would be helpful to have a tool to generate text styled like that in my beloved cartoon titles. So I made one.
You know what it’s like. You decide to make a fun little side project. No need to integrate it into your main codebase. It doesn’t have to have compatible CSS or HTML, so no worries. Then you make another one. Same deal. Then another. Oh. All of a sudden, you have several projects, and there are annoying differences between them.
Yours truly over at CSS Tricks: “I spend an unhealthy amount of time on the typography in my designs, and if you’ve read any traditional typography books, you might remember “the measure.” If not, it’s simply the length of a line of text. But measure means more than that, and once you understand what it represents, it can change how you think about layout entirely.”
Last week, I explained my strategy for writing CSS selectors. Today, I’ll explain how I decide on and design layouts. It isn’t really about grids; it’s about a repeatable way to make layout decisions.
Yours truly over at the Smashing Magazine: “SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.”
Writing good CSS is all about restraint. As an example, I used to over-specify too many things in my stylesheets. It was a bad habit picked up from BEM, OOCSS, and from developers who flattened everything with classes to dodge specificity. Now I think of my CSS selector strategy as a “progressive narrowing of scope.”
When I’ve had a few spare minutes, I’ve been adding to and optimising my Magnificent 7 character animations to improve rendering speed. Then I had the idea to build a silly fairground-style shooting game, and I set myself the challenge of keeping it as small as possible.
Yours truly over at CSS Tricks: “Over the past few months, I’ve explored how we can get creative using well-supported CSS properties. Each article is intended to nudge web design away from uniformity, toward designs that are more distinctive and memorable. One bit of feedback deserves a follow up.”
Yours truly over at the Smashing Magazine: “Ambient animations are subtle, slow-moving details that add atmosphere without stealing the show. In part two of his series, web design pioneer Andy Clarke shows how ambient animations can add personality to any website design.”
It’s incredibly important to respect people’s preferences and to ensure that any movement is turned off when they’ve set “reduced motion” in their OS settings. After adding my Magnificent 7 animations yesterday, I went back to check them with reduced motion enabled. Oh hell, my CSS grid has also stopped working, and it took me all morning to realise the issue wasn’t the grid, but how I’d structured my media queries.
Yours truly over at CSS Tricks: “There are so many creative opportunities for using shape-outside that I’m surprised I see it used so rarely. So, how can you use it to add personality to a design? Here’s how I do it.”
I have to admit that I got a little over-excited when I read that the contrast-color() function is supported in Safari and was keen to try it out. But there’s a problem, the thing with contrast-color is…
Before my workshop last week, I made some changes to my Compound grid generator. After the workshop, I made a new grid generator tool, this time designed to create modular grids.
Yours truly over at the Smashing Magazine: “Creating motion can be tricky. Too much and it’s distracting. Too little and a design feels flat. Ambient animations are the middle ground — subtle, slow-moving details that add atmosphere without stealing the show.”
To get ready for my first practical layout workshop for designers this week, I upgraded my compound grid generator with a new and improved version.
Yours truly over at CSS Tricks: “When you picture placing images in long-form content — like articles, case studies, or reports — the standard approach is inline rectangles, breaking up blocks of text. Functional? Sure. Inspiring? Hardly. So, how do you use images to add personality, rhythm, and even surprise someone along the way? Here’s how I do it.”
Hello. I’m a designer, writer, and unapologetic champion of art direction on the web. I work with product and website owners who want more than just a template layout—they want personality, story, and something people will remember.