All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

January 16th: View Transitions API Animation, SVG Cross-Stitch, and a Paper World


A radiant wave rises from a turntable in this scintillating Three.js scene from prisoner849.

CodePen Radio #396: Open Source

On the latest podcast, Chris & Robert Robert have a little chat about open source generally and what we do with open source at CodePen. CodePen itself is not open source, but all Public Pens on CodePen are, so we certainly handle a lot of it! Enough that we felt comfortable making our Mastodon presence on Fosstodon, which is an open-source-focused instance.

SVG Cross-Stitch

Kasey Bonifacio stitches up a collection of SVG illustrations in the signature "x" style of cross-stitch embroidery.

3D Walkman - Pure CSS

Ricardo Oliva Alonso recreates a retro Dribbble shot by michaelyeah in interactive CSS & JS. Turn it around to explore all the angles, then press the "Play" button for the full audio-visual experience.

Interactive Milk (Matter.js)

"This is a liquid toy project based on physics system with Matter.js. the liquid could be a water or any drinks :) To display circles liquidy, I used SVG filter." From Evan Jin (진경성).

genuary12 - we see what we see

Sophia Wood answers the 12th genuary prompt, "Tessellation", with this slow JavaScript meditation on shifting shapes. Press any key to change the grid size

Scroll direction rotation

Aleksandar Čugurović shares a pug puppy photo gallery with a subtle rotation on the images based on your scroll speed and direction.

3D Card

The Dark Rider and Force Mage confront you on hover in this CSS 3D demo from Gayane Gasparyan.


Matthias Hurrle shares a WebGL shader with big "Take on Me" vibes. "In this shader, edge detection is the main theme, revealing a cartoon-like style. Very soothing, as a side effect."

Intuitive List Item Transitions with the View Transitions API

CodePen co-founder Chris Coyier digs in to the animation capabilities View Transitions API in this quick article complete with a Pen demo.

#CodePenChallenge: Container Queries

In week two of our "New CSS" challenge, we tried out container queries. We've boxed 'em all up in this collection, including Pens by Max Swann, Sicontis, Henrique F. Schwingel, and Ashraff Hathibelagal.

An awesome, cross-browser Star Wars circular wipe transition?

Inspired by Will Boyd's Iris Wipe Transition demo, Rob O'Leary explores the pros & cons of making Star Wars style "screen wipes" in CSS Houdini vs clippath vs Mask.

Chris' Corner

Some Relatively Recent Great CSS Writing:

Chen Hui Jing, So your designer wants stuff to overlap

Love that title. Elements in HTML don’t just overlap each other by default. In fact, they intentionally push other elements around so that they don’t. You’ll need CSS to force elements to overlap if you need them to. The traditional ways:

  • negative margins
  • transform translate
  • absolute positioning

But Chen Hui Jing makes sure we don’t forget about grid! It might not come to mind immediately as we mostly think about making a grid and placing individual elements in individual grid cells. But grid cells don’t care! You can put as many elements as you want in a grid cell (or multiple grid cells). They are really just placement coordinates, not slots that only take one element.

Michelle Barker, Quick Tip: Negative Animation Delay

This is one of my favorite classic CSS tricks because it’s so obvious… but only after you’ve learned it. The point is mainly staggered animations. If you want animations to all be at different points along the same animation when they start animating, you can use animation-delay. But if you use a positive time value, the animation won’t start for the first time until that delay (duh). So instead, you use a negative value. The animation starts immediately, but backed up to where it needs to be to have the beginning of the animation hit once the negative delay elapses.

screenshot of an animation of the word "Bouncing"

Charlotte Dann, Fancy Frames with CSS

Awesome research from Charlotte, covering lots of ways to make interesting “framed” shapes like these:

a variety of frame-like shapes with cut corners

So is there one obvious clear best path forward to do this in CSS (and friends)? No — haha. Charlotte explores using 1️⃣ multiple gradient backgrounds (very complicated to construct, limitations with transparency), 2️⃣ border-image (one of the weirder CSS properties, but does help with placing gradients, or SVGs), 3️⃣ mask-border which I’m not sure I’ve ever even looked at in my life (no Firefox support), and finally, 4️⃣ Houdini which has no Firefox or Safari support, but does bring interesting JavaScript-powered opportunities into the mix.

Just to throw another one in the mix here… I happened to be playing with Open Props the other day and it has a “Mask Corner Cuts” section. It just uses mask (or -webkit-mask, as apparently the vendor-prefixed version alone gets the best support).

Scott Vandehey, The Power of CSS Blend Modes

Scott is inspired by other-Scott’s Pen (which happens to be #91 on the Top Pens of 2022 list) and breaks down exactly how it works. It’s a combination of filtering and blending layers. that’s just cool as heck.

multiple layers of a clockface image

You gotta go check out the article to see how Scott was able to stretch the idea to other effects, like a halftone filter.

Kate Rose Morley, Tree views in CSS

This is entirely doable in just semantic HTML and CSS alone:

Animation of a tree-style dropdown menu

The trick is putting all the list items that have a sub-list with a <details> element. The text of that <li> becomes whatever the <summary> is. Then you can style the ::marker of the details elements to have the plus-and-minus look rather than the default triangle. I appreciated Kate’s usage of :focus-visible too which keeps the focus styles away from mouse clicks.