April 18th: Wavy Text Styles, Three.js Glass, and Pseudo 3D Weirdness
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.
Leverage crypto wallets on popular blockchains like Ethereum and Solana to sign up and log into any Web2 or Web3 application.
Connect Swimm to GitHub, your IDE, and CI, and then create documentation as you code, keeping it automatically up to date at all times.
Sacha Van den Wyngaert makes clever use of Haml & SCSS looping plus keyframes to create this infinite hallway of synthwave vibes.
Yusuke Nakaya uses PixiJS to filter, distort, and split an image into tiny slices, then bring it all back together again.
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!
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.”
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.
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.
pokecoder makes waves with a layered text effect that makes the words look like they’re half-filled with liquid.
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.
Mark Boots demonstrates how to use a inline style custom properties and attribute selectors to slide an element in from many different directions.
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.
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.
👋 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.
: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.”