Piccalilli Newsletter - Issue #11

Welcome

Hey, Pals 👋

This issue is packed full of treats. It features accessible custom checkboxes, spaceships, birds, multi-screen murals and generative art.

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 Trick

Create custom keyboard accessible checkboxes

I am a huge fan of Lindsey and all of the work she does. She’s one of our best people in the accessibility community.

Styling checkbox elements is a nightmare and this article shows you both how to make a cool, pseudo element-based setup and how to make it accessible.

Smashing stuff!

Fancy

Small Victories - landing page

This is bold and I love it. I love the idea of the product, too. Anything that enables folks to publish their stuff on the web, independently is a winner in my eyes.

The scrolling behaviour of this is really good. A very creative way to deliver this content.

The view from above - editorial

⚠️Motion warning⚠️

Every time I look at this, I spot something new. The use of perspective and motion gives a fantastic depth of field.

The typography, colour and layout are out of this world, too.

Animation

CSS Spaceship

⚠️Motion warning⚠️

This is a lovely animation by Alice. I especially like the use of easing and the rocket’s flames.

Multi-Screen Mural for JSConf EU 2019

⚠️Motion warning⚠️

Holy moly, the look and feel of this is outstanding.

Everything about it is spot on and when you see it in context, it amplifies how good this is 1000%.

Art

Cropscape Generator

This is rad by Alex. It’s cool to see them use their knowledge of geospatial information systems to generate some really nice art.

Layout

UCLA Grid Poster

This is really nicely done. Great colours, great typography make up my favourite sort of usage of CSS Grid, which is posters!

Resources

Hex2RGB | An Animated Guide to Hex Codes

⚠️Motion warning⚠️

This is absolutely fantastic. I learned a tonne about how hex codes work. There’s a handy converter at the end, too.

Sponsor

This issue’s sponsor: my Patreon

This issue is sponsored by my Patreon. If you want to sponsor this newsletter, go ahead and back the position: sticky tier.

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!

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 🙂