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.

April 18th: Wavy Text Styles, Three.js Glass, and Pseudo 3D Weirdness

Plucky: A standing wave underline

Noah Liebman creates a fun underline hover effect that reacts like a plucked string, moving from a rigid squiggle to a softly bouncing line. Dig into the nicely-commented JS panel for details on how it was done.

Web3 Authentication API

Leverage crypto wallets on popular blockchains like Ethereum and Solana to sign up and log into any Web2 or Web3 application.

Frustrated with code documentation?

Connect Swimm to GitHub, your IDE, and CI, and then create documentation as you code, keeping it automatically up to date at all times.

CSS Synthwave

Sacha Van den Wyngaert makes clever use of Haml & SCSS looping plus keyframes to create this infinite hallway of synthwave vibes.

Glitch Filter

Yusuke Nakaya uses PixiJS to filter, distort, and split an image into tiny slices, then bring it all back together again.

pseudo element for fancy text-decoration

Nils Binder combines the :after pseudo-element with SVG to create a cool wavy underline as part of a series of CSS tips. Check out Nils’ profile for more!

Pseudo 3D BG Portrait

Kim Kirkegaard takes young Bill Gates into the uncanny valley with this weird cursor-following animation. “Have been toying with the idea of a 3D avatar made from slices of a stacked 2D image, with a “no-js” fallback.”

CodePen Radio #363: Kyle Shook

On the latest episode, Chris talks to Kyle Shook from Foxtrot about his creative work on CodePen and his site Frontend Practice that features fun challenges to help developers level up their front-end skills.

#CodePenChallenge: Gallery Details

Week two of the April challenge was all about the little details in photo galleries. Browse through our collection of Pens from week two, including galleries from Ward Larson, yoann-b, Chris Bautista, and Joshua van Boxtel.

Wavy Text Effect

pokecoder makes waves with a layered text effect that makes the words look like they’re half-filled with liquid.

Dyson Sphere

Hitesh Sahu uses the Babylon.js rendering engine to craft this dazzling Dyson sphere animation. Click and drag around to explore the scene, or toggle on “animate camera” for a beautiful view.

"slide-in-from=" attribute

Mark Boots demonstrates how to use a inline style custom properties and attribute selectors to slide an element in from many different directions.

product configurator & glass material

Create your own perfect glass model with Ksenia Kondrashova’s interactive Three.js configurator. Check out how the text behind the glass distorts through the glass facets while you play with the controls or flip the glass around.

Color Wheel Satisfaction

David Aerne shares an experimental HSL picker that is very satisfying to play with! Click a lightness step to set the color, which will also set the light and saturation for the whole visualization.

Chris' Corner

👋 Hey y’all! Thanks for reading. I thought it would be fun to do a little more writing in this here newsletter, so I’m going to give that a try. My goal is to make it interesting for anyone who builds websites, but with a bend toward front-end development.

I once recommended that, if you’re a front-end developer or designer that hasn’t learned much JavaScript yet, the one thing you should learn is how to toggle classes on elements. This little bit of interactivity opens a ton of possibility that is ultimately the job of us web builders. I stand by that, but I like the idea of state handling making its way to CSS as well, which is exactly what’s being explored in Miriam Suzanne’s CSS Toggles Explainer and Proposal. We’ve seen :checked used (abused?) for this a lot, I agree it’s time to see it done right.

There are many use-cases where an interaction (click/gesture) on one element toggles a ‘state’ that can be shared with other elements. This can range from toggling light/dark mode, to activating slide-in navigation, opening and closing menus, or interacting with sectioned content as tabs, accordions, or carousels.

John Boardley has been running I Love Typography for ages. I love how the site doesn’t just shine a light on the beauty of typography through writing and images alone, but the site itself is wonderfully designed, and they have started a marketplace for fonts as well. When John blogs his favorite fonts of the year, it’s always worth a read.

I love this quote that Marli Mesibov included in her recent Smashing Magazine article How To Use Storytelling In UX:

“You cannot have a page that’s too long — only one that’s too boring.”