• 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.

  • In Search of Simplicity

    During the past month or so at Atomic Smash I’ve been working on building our new front end framework (recently christened ‘Snap’) – a repository that includes all the scripts, packages and starter files to enable anyone in the development team to get started on a new project quickly and painlessly. Uppermost in my mind is the elusive goal of simplicity, in a front end development landscape that is anything but.

  • Do We Need CSS4?

    Jen Simmons raised an interesting proposal for the CSS Working Group this week:

  • Quick and Easy Dark Mode with CSS Custom Properties

    Adding “dark mode” support to a website or app is becoming increasingly popular among developers, many of whom favour this setting themselves. Giving users a dark theme option can be beneficial for accessibility, as some people experience headaches or visual difficulties from excessively bright screens, or have trouble reading for long periods on a light background.

  • Optimising SVGs for the Web

    Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. But plenty of times I’ve opened up a web project and found that SVG assets could be made significantly smaller with some straightforward optimisations. In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.

  • Fun with CSS Motion Path

    Animating an element along a path is something we as developers would normally reach for a big old JS library (like GSAP) for. But with the new CSS Motion Path module, we can create fancy path animations using only CSS!

  • Imperfect

    Different people have differing views on writing when it comes to personal blogs. Some people spend a long time perfecting a draft, making sure everything reads well, there are no grammatical errors, and all the code examples are helpful and flawless. Others dash out a draft and publish as quickly as possible, then worry about editing later.

  • 2019 in Review

    I’m going to try to keep this 2019 retrospective brief, but like many people, I find it cathartic to look back at the year’s triumphs and disappointments (not dwelling for too long on the latter), and ready for myself for the year ahead.

  • 7 Uses for CSS Custom Properties

    Custom properties (also known as CSS variables) allow us to store property values for re-use in our stylesheets. If you’re relatively new to them, you might wonder when you might use them over and above preprocessor variables (if indeed you use a preprocessor). I’m using custom properties a lot in my workflow these days, and thought I would collate some of the use cases here.

  • Beautiful Scrolling Experiences – Without Libraries

    Published on 24Ways

  • Re-creating the ‘His Dark Materials’ Logo in CSS

    I love the new BBC adaptation of Philip Pullman’s His Dark Materials trilogy of novels. There’s also some pretty nice graphic design to appreciate. I’m a sucker for a beautiful title sequence (I need to watch the opening credits of Game of Thrones in full, every single time), and this one certainly fits the bill, as well as the striking logo. After watching a recent episode, I thought I’d have a go at re-creating this logo with CSS!

  • A Layout Trick for Building a Contact List

    I recently needed to build a design for a contact list that looks like this: