This week: Async UI Flows, Subgrid Experiments, and CSS Waves
By listener request, our latest podcast is about the wonderfully-terribly complicated process of keeping a site full of user-generated content safe.
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.
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!
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."
Hover/tap around in the dark to reveal the "glittering-cave effect" built with "CSS, gradients, and blending" by Simon Goellner.
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.
"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.
A delicious portfolio of treats and text reveal on scroll in this tasty CSS & JS demo from HighFlyer.
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.
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.
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.
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.
Semantic HTML? Pffffft. Why bother? Unicode is all you really need.
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.
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.