Piccalilli Issue #3
Welcome aboard the CSS Train 🚂
This issue has got all sorts of treats for you. We’ve got emoji animations, variable fonts, single
<div> art and clever fixed positioning tricks.
If you’re enjoying reading this newsletter as much as I’m enjoying creating it, please share it with your pals. It’ll be really appreciated if you do.
This issue’s CSS utility helps you to create controlled aspect ratios which are handy in a responsive design context. It’s especially useful for situation where you don’t have much say over the content provided, but you still want to maintain some control.
An oldie, but a goodie from Scott Kellum. I’ve linked the pen’s detail view because he explains what’s going on really well.
You know a site is going to be amazing if Lynn Fisher builds the front-end, and this one is no exception to that rule.
This is hella cool by Adam Kuhn. It’s got butter smooth interactions and animations.
⚠️Motion Warning ⚠️
A lovely, quirky animation. I’m really impressed at the attention to detail—especially with motion.
⚠️Motion Warning ⚠️
This is a hella fun little animation. A great use of 3D.
Look, Lynn Fisher is a hero of mine and I will feature them in my newsletter twice in one issue if I want.
Take a moment to scroll through all of this lush art, then remind yourself that each on is only one, single
I couldn’t decide wether to put this one in the Fancy or the Type category, because this landing page is stunning.
It’s best to look at this on a device with a mouse/trackpad, because moving it around the main intro very cleverly shows this variable font's configurations.
Recommended Person To Follow
Lara is someone who I very much look up to. She writes a tonne of good stuff about CSS algorithms and design systems.
I absolutely love Lara’s website, too.
“The CSS Working Group have designed an aspect ratio unit for CSS. While this isn’t in browsers yet, this article takes a look at the process of designing a new sizing method and explains how it will work.”
As always, my pal Rachel Andrew explains things in extreme detail, while making it all understandable.
This article is directly related to this issue’s CSS utility, too!
That’s all, folks
Until the next issue, take it easy 🙂