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!)
Read more
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.
Read more
Have you ever needed to build a UI where a caption needs to slide over an image on hover, revealing more content?
Read more
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.
Read more
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.
Read more
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.
Read more
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.
Read more
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.
Read more
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.
Read more
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.
Read more
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.
Read more
Jen Simmons raised an interesting proposal for the CSS Working Group this week:
Read more