3D Mario, Rollable Menus, and Colorful Potions! | Frontend Horse

Live Streams

We have two lovely guests on the stream this week.

Cassie Evans: The New Era of Smooth Scrolling — frontend.horse

Cassie is back on the stream to announce what’s in store for the GSAP 3.10 release and show us how to add smooth scrolling to a site in a modern way!

Andy Bell: Fluid Typography, Space, and Layouts! — frontend.horse We’re going to learn how to create with consistent, fluidly scaling typography and spacing, all using CSS. Andy will show us some great techniques so that our website is consistent and looks great at every screen size.

CodePens

Pure CSS Mario 64 — codepen.io

Ben Evans recreates the classic opening scene of Mario 64.

There’s zero JS, and yet Mario follows your mouse around the screen, just like in the game. Ben’s doing this by creating a grid of elements and using the :hover pseudo-class on each.

Check out our article that breaks down Ben’s wonderful CSS illustration techniques: Creating Realistic Art with CSS.

CSS Pipe — codepen.io

In December, Ben Evans also put out a 3D CSS pipe that I want you to see. It’s a spot-on recreation of René Magritte’s The Treachery of Images.

Even the text is made from CSS, a rarity for most CSS illustrations.

Rollable Nav Menu — codepen.io

Josetxu made an entertaining menu for this week’s CodePen challenge. It feels like ropes hold it together in the way it swings when it drops down.

The trick here is nesting! The first row nests the second row, which nests the third row, and so on.

The last element has its own animation, but is also affected by the animations of all the elements it’s inside!

We cover this technique in a bit more detail in this article.

Color Shaders — codepen.io

I’m loving these gorgeous gradient shaders from CJ Gammon. Check out these two:

3D Glowing Liquid — codepen.io

A great little animation loop from SeraOne. It’s all drawn and animated with CSS.

The color-changing effect is especially nice, and I love that it’s just keyframed with a filter: hue-rotate(360deg);. Way to keep things simple!

News

Safari bringing CSS Subgrid and Container Queries

That’s right, Subgrid and Container Queries have just landed in Safari’s Technology Preview Release 142.

What does this mean? That these incredible layout tools are one step closer to being something you can use on real sites.

We’ve learned about both of these on stream. Steph Eckles showed us the magic of container queries, and Kevin Powell sold us on CSS Subgrid.

So Long, Partner

Thanks for hitting the trail with me today!

I’d love to hear what you enjoyed, or anything fun you’ve found around the web that I should highlight.

I wasn’t always consistent with this newsletter, but this is my 16th consecutive issue! Here’s to many more.

Your neigh-bor,

Alex