A CSS-only, animated, wrapping underline
August 21st, 2020
Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link hovers, another color underlines kinda slides in with a gap between the two. Typical text-decoration doesn’t help here, so multiple backgrounds are used instead, and fortunately, it works with text that breaks across multiple lines…
Leading-Trim: The Future of Digital Typesetting
August 21st, 2020
leading-trim is a suggested new CSS property that lets us remove the extra spacing in every font so that we can more predictably style text. Ethan Wang has written about it — including how Microsoft has advocated for it — and that it’s now part of the Inline Layout Module Level 3 spec. You’d use…
A Community-Driven Site with Eleventy: Preparing for Contributions
August 19th, 2020
I’ve recently found myself reaching for Eleventy (aka 11ty) above all other tools when I want to develop a website. It’s hard to beat a static site generator that provides advanced templating opportunities while otherwise getting out of your way and allowing you to just create. One of those sites is Style Stage, a modern…
Timer Bars in CSS with Custom Properties
August 18th, 2020
I was working on a thing the other day that needed a visible timer. There was UI precedent for this type of timer on the project. People didn’t want to see numbers ticking downward; it was more ideal to see a “bar” drain away from full to empty. I mention that because there are tons…
What I Learned by Fixing One Line of CSS in an Open Source Project
August 14th, 2020
I was browsing the Svelte docs on my iPhone and came across a blaring UI bug. The notch in the REPL knob was totally out of whack. I’m always looking to contribute to open source, and I thought this would be a quick and easy fix. Turns out, there was a lot more to it…
Stacked Cards with Sticky Positioning and a Dash of Sass
August 13th, 2020
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website were a collection of cards stack on top of one another as you scroll. I started wondering how much JavaScript this would involve and how you’d go about making it when I realized — ah! — this must be the work of…
More Control Over CSS Borders With background-image
August 7th, 2020
You can make a typical CSS border dashed or dotted. For example: .box { border: 1px dashed black; border: 3px dotted red; } You don’t have all that much control over how big or long the dashes or gaps are. And you certainly can’t give the dashes slants, fading, or animation! You can do those…
Computed Values: More Than Meets the Eye
August 5th, 2020
Browser DevTools are indispensable for us front end developers. In this article, we’ll take a look at the Computed tab, a small corner of the DevTools panel that shows us big things, like how relative CSS values are resolved. We’ll also see how inheritance fits into the browser’s style computation process. The “Computed” tab is generally located…
A Lightweight Masonry Solution
August 3rd, 2020
Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood how…
Getting the Most Out of Variable Fonts on Google Fonts
July 30th, 2020
I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono, and it just launched officially on Google Fonts! Wanna try it out super fast? Here’s the embed code to use the full Recursive variable font family from Google Fonts (but you…