Piccalilli Newsletter - Issue #2

Welcome permalink

Welcome, CSS fan!

This issue has some very cool animations, some lush websites, a CSS Monopoly board and a flying pig. Loads to get stuck into.

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 Utility permalink

Creating a full bleed CSS utility

This issue’s CSS utility helps you to create a full bleed element that breaks out of its container. It’s very handy for if you don’t have much control over the element’s parent.

Fancy permalink

Plastic — Agency site

This is a beautiful website. Considering there are a lot of animations and transitions, it runs very smoothly indeed.

I’m a big fan of the offset layouts, split type and the custom cursor.


Hello Alfred

Although this site follows a typical product landing page style, there’s some lovely creative use of CSS transform and some great illustration.

I’m very into this aesthetic.


CSS Grid: Monopoly (Harry Potter Edition)

A smart CSS Grid powered Monopoly board.

Even though CSS Grid is very good for very serious layout work: it’s good to see it used to make fun things, too.


Magazine Grid Layout

I love everything about this. The colours, the typography and especially the layout.

One of my favourite things to see is poster layouts made with CSS Grid, so keep 'em coming, folks.

Animation permalink

Flying Pig

This is a fun little animation by Mathilda Gregory. It was done at a CodeBar session, too!


Course Clear!

Stephen Shaw is at it again with his slick library, Splitting.js.

This is a great recreation of the Course Clear screen in Super Mario Maker, using CSS animation (with splitting, of course)

Fun permalink

CSS Battle

This reminds me of the ol’ classic: CSS Off from back in the day.

A really cool project that looks like it’s going to be a lot of fun for folks.

Type permalink

A clever fluid type system

In Eric’s words:

“A script looks for elements that have been marked with a data-container attribute and uses ResizeObserver to set custom --ci and --cb properties (like vi and vb) on them, equal to 1% of the marked elements’ inline+block sizes.

Through the ✨magic of the cascade✨ descendants of these containers can then use these container-relative “units” in CSS, via var(--ci) and var(--cb).

So, sub 100 * var(--ci) into Andy’s ingenious CSS locks calc(), in place of the original 100vw – et voilà!”

Eric is a very clever person!

Thank you permalink

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 🙂