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.
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.
Kasey Bonifacio stitches up a collection of SVG illustrations in the signature "x" style of cross-stitch embroidery.
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.
"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 (진경성).
Aleksandar Čugurović shares a pug puppy photo gallery with a subtle rotation on the images based on your scroll speed and direction.
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."
CodePen co-founder Chris Coyier digs in to the animation capabilities View Transitions API in this quick article complete with a Pen demo.
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.
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.
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.
Charlotte Dann, Fancy Frames with CSS
Awesome research from Charlotte, covering lots of ways to make interesting “framed” shapes like these:
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️⃣
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
-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.
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:
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.