This week: Async UI Flows, Subgrid Experiments, and CSS Waves

CodePen Radio #397: User-Generated Content Safety

By listener request, our latest podcast is about the wonderfully-terribly complicated process of keeping a site full of user-generated content safe.

Build Advanced AI-Powered Virtual Assistants

Build intelligent virtual assistants that operate across multiple channels and in over 100 languages. Give customers 24/7 support and minimize live agent interventions with the power of Conversational AI. Get started today for free.

Hall of Fame

Steve Gardner assembles a spectacular collection of "The very best CodePens" ranging from early-days classics to recent hits. Flip through to revisit your favorites or find something new!

Moving mirrors

25 mirrors reflect two lights to create an ever changing pattern in this Pen by Callum Macrae, inspired by the work of Joanie Lemercier. "What I thought would be a simple project ended up taking over a week - while three.js handles the shadows, the reflections of the light had to be manually implemented in the shader."

Illuminate Your Mind

Hover/tap around in the dark to reveal the "glittering-cave effect" built with "CSS, gradients, and blending" by Simon Goellner.

CSS Pendulum Waves

Amit Sheen is back with a virtuoso performance of CSS physics! Watch the pendulum swing, then hit the arrow to turn the support and view it from a new angle.

Composing async UI flows with Promises

"A fully keyboard accessible flow of screens. They are managed with pure JS promises and animated with pure CSS. The views are promises themselves that I chain together." From Mustafa Enes.

Scroll Reveal

A delicious portfolio of treats and text reveal on scroll in this tasty CSS & JS demo from HighFlyer.

#CodePenChallenge: Subgrid

In the 3rd week of the "New CSS" challenge, we got into subgrid! Check out the collection from week three, including Pens by Xionidos, Ashraff Hathibelagal, Henrique F. Schwingel, and majchi.

GSAP CodePens 2022

Scroll through the GreenSock team's favorite GSAP Pens of 2022 in this slick highlight reel, super-powered by GSAP's ScrollTrigger, ScrollSmoother, and SplitText plugins.

Pure CSS morphing polyhedra

Ana Tudor animates a shapeshift from "dodecahedron → rhombicosidodecahedron → snub dodecahedron → rhombicosidodecahedron → icosahedron" with SCSS in this mind-blowing Pen. Check out the Pen's description for an in-depth explanation of how it was made.

minimal svg quadratic waves

Andy Fitzsimon shares an animated SVG wave pattern that's minimal both in design and code: it's <35 lines of HTML & SCSS all told.

Chris' Corner

Yuan Chuan with a funny blog post opener commenting about how much they liked their friend’s photos:

I was attracted by their slight blur and the subtle glowing effects, and wondered what kind of filter function was used. But then she told me it’s just because the camera lens wasn’t wiped clean.

Turns out you can get that same kind of “dreamy” effect with some fancy dancing with filters.

blurry photo of a trees at a roadside.

Semantic HTML? Pffffft. Why bother? Unicode is all you really need.

a sarcastic rundown of HTML elements.

Terence Eden says he is very sorry for this.

I probably should have just copied the unicode above into this email rather than screenshotting it, but it made me too nervous for some reason. Partially because I’d worry it looks like spam to some email servers.

Here’s a nice walkthrough of 3D in CSS by Brad Woods.

a diagram of rotate3d in CSS.

One of the demos has you grabbing the corner of an element with regular text in it, and as you drag it folds back in space, with, you guessed it 3D in CSS.

Seeing text in 3D is somehow extra satisfying for me, perhaps because it’s more rare to see. And hey, that reminds me of Codrops recent On-Scroll Typography Animations which are very very cool. Make sure to scroll far enough to see the “Unfolding” one which is my favorite.

I always thought that the math behind calculating the perfect nested border-radius would be complex somehow. But Paul Hebert has it figured out for us:

outerRadius - gap = innerRadius

Gotta get this right folks! See how awkward it can be on the left vs. fixed on the right.

Side-by-side comparison of two different approaches to CSS border-radius.