Piccalilli Newsletter - Issue #20

Welcome

你好! 👋

This is the 20th issue of Piccalilli 🎉

Time flies when you're having fun. Thank you for subscribing to this newsletter and encouraging me along the way. It means a lot!

On with the CSS 🚀

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

The Sidebar - Every Layout

This is one of my favourite layouts from the new book that I co-authored with Heydon. There’s a lot of flexbox goodness to get your teeth stuck into.

A reminder: you can still grab 20% discount on Every Layout by using the code PICCALILLI_PAL for being a subscriber of this newsletter.

Fancy

Cher Ami - Agency Site

⚠️ Motion warning ⚠️

This website is wild and incredibly creative. There’s a lot going on and some very odd interactions.

The transition states are outrageously good, too!

Lemonade - Campaign Site

⚠️ Motion warning ⚠️

This is a beautiful site. I normally hate scroll-based stuff, but it’s really nicely done.

The colours, typefaces and illustration are pure lushness.

Webclerks Conference Site

This website is stunning. A hell of a good lineup of speakers too!

Select menu interaction

These are really cool. I’m not 100% convinced that they are accessible, but it is nice to see semantic elements used on a demo like this.

Nice work by Aaron.

Animation

Deep sea (Chrome only)

⚠️ Motion warning ⚠️

Another stunning piece of work by yuanchuan. I could sit and watch this for hours.

Fun

Bee Right Back

⚠️ Motion warning ⚠️

This is a lovely little loader by Gabriele.

Resources

CSS Filters

This is brilliant, by Valentin. It’s such a handy resource for playing with and learning about CSS filters, which are incredibly powerful.

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 🙂