Piccalilli Issue #2
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.
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.
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.
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.
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.
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.
This is a great recreation of the Course Clear screen in Super Mario Maker, using CSS animation (with splitting, of course)
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.
In Eric’s words:
“A script looks for elements that have been marked with a
data-containerattribute and uses ResizeObserver to set custom
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
100 * var(--ci)into Andy’s ingenious CSS locks
calc(), in place of the original
100vw– et voilà!”
Eric is a very clever person!
That’s all, folks
Until the next issue, take it easy 🙂