The
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.

August 3rd: Locks, Lakes, and Loaders

Only CSS: Summer Dream

Yusuke Nakaya animates an idyllic scene with SCSS. Watch the bubbles from the oars fade away as the rower rows across an endless lake.

CSS Mastermind

Alvaro Montoro builds a fully playable Mastermind game with CSS! "here are 6 colors and a 4-length code to decipher. Can you break the code?"

CodePen Radio #278: Community Creativity

Chris and Marie talk about the creativity in creations they’ve seen on CodePen, including photo effects, water droplets, live streaming code, and making sheep!

Candy Color Button Animation

Yuhomyan sets out an assortment of candied buttons with satisfying hover animations.

#CodePenChallenge: Flutter Custom Painter

For the final week of the July challenge, we worked with Flutter's CustomPainter class. Check out the Pens from week four, including A Flutter Dev's Escher-inspired "Flutter Cube".

CSS3 Loader & Spinner

Take a spin through Vineeth.TR's gallery of loaders and spinners next time you need something fun for people to watch while they wait!

SVG Avatars Configurable Through CSS Vars

"Experimenting with SVG avatars configurable through CSS variables. Click to randomize styles." From Lea Rosema.

JS Lock Picking Game

Peyman shares a mini-game inspired by the lock picking mechanics in Uncharted. Move your mouse around the circle until the lock starts to shake, then hold it for 5 seconds to set the pin.

Jumping Gooey Navigation

A gooey highlight jumps between navigation items in Craig Roblewsky's Pen. Try jumping from one end of the row to the other! And check out the full tutorial on how it was made on Craig's site.

Details Element for Help Text

Niels Voogt demonstrates how to use the HTML `details` and `summary` elements for help text on a form.

Glowing Slinky

Jon Kantner's recreates the fun of a glowing slinky toy in this CSS animation. Take a look at the comments in the code for a breakdown of how the slinky rings move.

Floating island /w Threejs & GSAP

Zoom in on Kasper De Bruyne's little floating world to check out its inhabitants — three blocky bunnies hoppin' around in the forest.

Extra News