Welcome to the 5th edition of Piccalilli!
I can’t believe we’re on #5 already and this week, we have lots to get through, so strap in.
This issue features hover tricks, scroll tricks, API-driven animations, squishy circles, relative sizing with EMs and live coded CSS Grid.
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.
Personal links permalink
I want to spend more time working on stuff that benefits the web community, but I also need to feed my family, so I've created a Patreon!
I’d really appreciate your support so I can help folks learn the web platform. The Patreon will hopefully reduce the amount of time I work on client projects and increase the amount of time I can spend working on projects like this one.
Any support will be appreciated and you can select as little as $1 per month!
CSS Pattern permalink
We normally associate
em units with sizing type or creating media queries. This article shows you how you can also use them to scale things proportionally, within your components.
Great for design systems and accessibility!
CSS Trick permalink
Trys is a clever lad and this is a graceful solution to a common design pattern.
⚠️ Motion warning (when you scroll) ⚠️
Scott never disappoints with his tricks.
⚠️ Motion warning ⚠️
This is bloody clever by Rachel. The transitions between landscapes are perfection.
There’s a nice write up with some snapshots too.
⚠️ Motion warning ⚠️
The in-depth writeup about this live solar power animation is a really interesting read, too.
⚠️Motion warning ⚠️
I love this by Cassidy. It’s super creative and utilises the power of Sass really well.
💰Paywall warning 💰
I love this creative use of CSS Grid to achieve a seemingly random layout of magazine covers. An interesting read, too.
More info about the grid stuff here.
Recommended Person To Follow permalink
Michelle consistently produces super content over at CSS IRL. I learn an absolute tonne following her. She’s also a fantastic speaker and all-around v nice person.
Jen Simmons delivers a fascinating talk where she is handed a flash drive with some boilerplate HTML with image assets, then proceeds to start building what she sees and she’s never seen the contents of the flash drive before.
I found her thought process about the grid layout really interesting and learned a tonne from one of our greatest teachers of layout.