Piccalilli Newsletter - Issue #5

Welcome

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.

I’ve started a Patreon!

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

Relative sizing with EM units

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

Fading out siblings on hover in CSS

Trys is a clever lad and this is a graceful solution to a common design pattern.

Bind CSS keyframe animation to scroll

⚠️ Motion warning (when you scroll) ⚠️

Every time I look at this, it blows my goddamn mind. So many creative ideas are now swimming around that I’d usually discard in fear of clogging up a user’s browser with clunky JavaScript.

Scott never disappoints with his tricks.

Fancy

Ikko Tanaka (pure CSS)

Stunning CSS re-creations of legendary graphic designer, Ikko Tanaka's work by yuanchuan.

Random landscape generator

⚠️ Motion warning ⚠️

This is bloody clever by Rachel. The transitions between landscapes are perfection.

There’s a nice write up with some snapshots too.

Live solar power animation

⚠️ Motion warning ⚠️

This is really cool. Cassie is smart as heck and I love her work (motion warning).

The in-depth writeup about this live solar power animation is a really interesting read, too.

Circle Squish 'n' Spread

⚠️Motion warning ⚠️

I love this by Cassidy. It’s super creative and utilises the power of Sass really well.

Layout

24 Magazine Covers About Climate Change

💰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.

Michelle Barker

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.

Video

Jen Simmons on Thinking With Grids at SmashingConf SF 2019

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.