Search
Exciting Things on the Horizon For CSS Layout
8.5.2020
Michelle Barker notes that it’s been a heck of a week for us CSS layout nerds.
Firefox has long had the best DevTools for CSS Grid, but Chrome is about to catch up and go one bit better by visualizing grid line numbers and names.
Firefox supports gap for display: flex, which is great,...
Different Approaches to Responsive CSS Motion Path
24.4.2020
As a follow-up to Jhey’s recent post on responsive motion paths, Michelle Barker notes that another approach could be to just transform: scale() the whole dang element.
The trade-off there is that you’re scaling both the path and the element on the path at the same time; Jhey’s...
Re-creating the ‘His Dark Materials’ Logo in CSS
11.1.2020
The text logo has a slash cut through the text. You set two copies on top of one another, cropping both of them with the clip-path property.
What's interesting to me is how many cool design effects require multiple copies of an element to do something cool. To get the extra copy, at least with...
7 Uses for CSS Custom Properties
27.12.2019
I find all seven of these quite clever and useful.
I particularly like using custom properties when you can sneak a variation into a place where you'd normally have to re-declare a whole big chunk of code.
.some-element {
background-color: hsla(
var(--h, 120),
var(--s, 50),
var(--l...
What We Want from Grid
27.2.2019
We felt spoiled with CSS grid for a minute there. It arrived hot and fast in all the major browsers all at once. Now that we're seeing a lot more usage, we're seeing people want more from grid.
Michelle Barker lists hers wants (and I'll put my commentary after):
Styling row and column gaps. I've...