Piccalilli Newsletter - Issue #6

Piccalilli Issue #6

Welcome to the 6th edition of Piccalilli!

This issue features Nintendo nostalgia, chameleons, hyper-realistic still life and 3D glasses. Let's get stuck in!

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.

CSS Utility

Create a responsive grid layout with no media queries, using CSS Grid

Embracing the flexible nature of the web gives us powerful, resilient front-ends—where instead of using specific sizes, we give elements sensible boundaries and let them auto-fill where possible. I embrace this mentality as much as possible and roll utilities out like this one for grid layouts.

Fancy

Kota - Agency Site

⚠️ Motion warning ⚠️

A very bold design with a smart brush typeface. There’s some great detail with the hover states and the mouse tracking that creates some tasteful depth of field.

The hamburger menu is very nice too, even though I’m not a fan of that design pattern in general.

CSS Starfox

⚠️Motion warning ⚠️

I found this and thought to myself: “this must have some JavaScript”, but nope, it’s all CSS.

Stunning work by Yusuke Nakaya.

Gwendolyn Weston’s Site

This site proves that you can do a lot with not much CSS. I'm in awe of the layout, colour and typography.

You know it’s good because the folks at YupGup made it.

Animation

Colour Changing Chameleon

⚠️ Motion warning ⚠️

Cassie is at it again with this adorable animation that is powered by your web cam. The chameleon’s colour changes based on what the most prominent colour of your current webcam frame is. The use of CSS Custom Properties to tie all the technology together is elegantly done, too.

Super, duper smart work.

Water cooler animation

⚠️Motion warning ⚠️

Very adorable animation by Kasper De Bruyne. The attention to detail is fantastic. I love the overall aesthetic, too.

CSS 3D Scan

⚠️Motion warning ⚠️

This is very clever indeed. Butter smooth animations, too. Fab again (twice in one issue) by Yusuke Nakaya.

Art

Pure CSS Still Life - Water and Lemons

When I first saw this, I thought it was a photograph, but nope, it’s a goddamn hyper-realistic CSS art piece.

Hats off to Ben for this amazing work.

Ire Aderinokun

Ire is a prolific front-end developer. I’m a huge fan of the work that she does. I especially love reading her blog over at bitsofco.de.

Follow her and learn a tonne of stuff!

Articles

3D Glasses with Perspective Origin

I really enjoyed reading this. I need to track down some red-cyan 3D glasses to enjoy it fully.

Dan’s writing is great, as always.

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 🙂