Piccalilli Newsletter - Issue #3

Welcome

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.

Enjoy!

CSS Utility

Creating an aspect ratio CSS utility

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.

CSS Trick

Sass/CSS parallax

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.

Fancy

Text in a circle with CSS variables + Splitting.js and fluid type

Michelle Barker made this with the fluid type CSS utility that I shared in issue #1 and splitting.js, which powered the Super Mario Maker animation from issue #2.

&yet redesign

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.

Animated info card

This is hella cool by Adam Kuhn. It’s got butter smooth interactions and animations.

Animation

Fast Lane

⚠️Motion Warning ⚠️

A lovely, quirky animation. I’m really impressed at the attention to detail—especially with motion.

Emoji Carousel

⚠️Motion Warning ⚠️

This is a hella fun little animation. A great use of 3D.

Art

A Single Div

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 <div> element.

Magic.

Type

Montecatini Pro landing page

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.

Lara Schenck

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.

Articles

Designing An Aspect Ratio Unit For CSS — Smashing Magazine

“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!

Thank you

That’s all, folks

If you have any comments, feedback or submissions, please get in touch via Twitter or Email.

Until the next issue, take it easy 🙂