Piccalilli Newsletter - Issue #22

Welcome

Salute! 👋

I’m publishing this from a train on the way back up to my home city, Bradford. It’s not the nicest place in the world, but I’m looking forward to seeing some of the brutalist architecture that I grew up admiring again.

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!

Featured Article

Bite Sized Basics: Box Sizing - CSS From Scratch

Box sizing can be a real head scratcher. The default, box-sizing: content-box value can be very confusing for a beginner, so I created this handy little guide.

In the run-up to the book that I’ll publish next year, I’ll add a few more of these useful bite sized basics.

You can sign up for updates for the book, too.

Fancy

Species in Pieces

⚠️ Motion warning ⚠️

An oldie, but a goodie. Sit back and enjoy the lushness of this site. Then fire up your dev tools and marvel at the wizardry.

Cann - product site

⚠️ Motion warning ⚠️

There’s so many tricks going on with this site. It’s a refreshingly creative take on a product site.

Photocopy effect

Scott made me aware of this when we were chatting about my increasingly low-res website.

It’s a cool effect that I want to play with some more.

Animation

Pure Css Alien Commuter Falling Asleep On His Way To Work

⚠️ Motion warning ⚠️

This is best in Chromium browsers, but it's super cool, nonetheless. Nice work, Per.

Fun

Variable Wildflower Color Theme

This is a nice demo of CSS Custom Properties and the cascade to control the theme of a page.

Fantastic stuff by my mate, Joni.

Resources

Wave generator

This is really handy. You could get really creative but also, save yourself hours of messing around if you need to build a Standard Landing Page™

Sponsor

This week’s sponsor is State of the Browser

I’m delighted to have these folks sponsoring this week’s issue of Piccalilli. It’s a great conference and tickets for this year’s event, on September 14th, are on sale now!

There’s a great lineup of speakers this year and I’m speaking too!

You can save 25% on any ticket type by using AndyBell as your coupon code.

I hope to see you there!

Thank you

That’s all, folks

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

I’m also taking a short break from writing tutorials, so I’m looking to feature your work. If you have written a handy CSS utility, CSS trick or tutorial, you can submit a link over at https://submissions.piccalil.li ➡

Until the next issue, take it easy 🙂