Piccalilli Newsletter - Issue #9

Welcome

¡Hola!

This issue is jam packed with beautiful websites, cameras, gooey transitions and good ol’ skeuomorphism.

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.

<aside> I’m also completely redesigning and re-platforming this newsletter and have created a survey. I would really appreciate it if you, a valued subscriber, could fill it in, to help me make the right design decisions. </aside>

CSS Pattern

Create a center split layout with CSS grid and Flexbox

One of my favourite things about CSS Grid and Flexbox is that you can create unconventional layouts a heck of a lot easier than before we had proper layout tools available to us. We’re going to build a split layout that breaks an article of content into separate, coloured panels.

Fancy

Epic Travel - Website

This website is a visual treat. The whole look and feel, along with the lush typography and the art direction makes this one of very few recent websites that made me do a little gasp when it loaded.

There’s a fantastic write up by the designer, Mike Kus too.

The Power of Serverless for Front-End Developers

Holy moly this site is a masterpiece. I love the whole redesign of CSS-Tricks and everything that has followed has been amazing.

The content of this site is very handy too. I find this whole new serverless world pretty fascinating, personally.

A dream team of Kylie Timpani, Geri Coady and Chris Coyier have made a truly excellent piece of work together.

Ryan Mulligan - Personal Site

This is a fun-as-heck personal site for Ryan Mulligan, who coincidentally, is looking for a new role.

The hover states are sublime and the little confetti switch (⚠️motion warning) is a nice touch.

Illustration

CSS Polaroid Camera

⚠️Motion Warning ⚠️

The shading, via box shadow on this illustration is lovely. There’s a hell of a lot of attention to detail, including the subtle animation.

Great work by HIC.

Animation

CSS-Only Gooey Content Toggle

The Keyframers are at it again with this mind blowing gooey transition. You can also watch them code it, live!

Fun

Things Status Board

Mr CSS-Tricks himself, Chris Coyier has pulled out all of the skeuomorphism tricks to make this cool demo.

Looking through the CSS, it’s great to see how much easier these effects are now, than when they were super popular back in the mid-2010s.

Articles

The Dark Side of the Grid (Part 2)

⚠️Motion Warning ⚠️

This is a great, interactive article about CSS Grid and ordering, which is a must read. I absolutely love Manuel’s website design, too.

The Pink Floyd reference didn’t go unnoticed, either 🙂

Folding the DOM

⚠️Motion Warning ⚠️

Josh is bloody good at making highly interactive, useful articles and this one is no different. So much useful detail in this one.

Resources

Simple click-to-copy CSS effects

⚠️Motion Warning ⚠️

There’s some really lovely effects in this collection and being able to just click them to reveal all the code that you need to make them work is a nice touch.

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.

You can also submit a link over at https://submissions.piccalil.li ➡

Until the next issue, take it easy 🙂