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.

March 25th: Color Tools, Liquid Transitions, and Hover Effect Sorcery

Pure CSS Mario 64

Ben Evans has done it again! The pure CSS illustration of Mario becomes SUPER when you try out the hover effects that will have you saying "what?" and "how???". Ben shares a making of video in the Pen description, and you can dig into the CSS panel to see more of how it was made.

Liquid Transition Effect

Aysenur Turk's shares a trippy travel site concept with dreamlike liquid transitions between images in the slider. Powered by rgbKineticSlider and based on a Dribbble shot by Serhii Markov for EVNE Developers.

#CodePenChallenge: Mega Menus

The third week of our "Go Big" challenge was all about Mega Menus. Dig in to our collection of Pens from week three, including delicious creations from Nik439, Josetxu, David_Germany, and Sarah Frisk.

Color Scaler

David Aerne shares a tool for playing with color scales. "drag-n-drop colors to change order, play around with different color models, see your colors in the fancy Zdog 3D view, full cycle your palettes by connecting both ends".

A Quiet Space

Sophia Wood shares a peaceful bit of P5.js "stream of consciousness code" where stars and planets pass by in a quiet sky.

Bots, Dots, Stars

Travel along the dotted paths to collect the stars — and do it fast, because those dots disappear! A super-fun JavaScript game from Tom Miller.

CodePen Radio #360: with Sarah Fossheim

Chris' guest this week is Sarah Fossheim! "Sarah got me thinking that it’s not just CSS, but perhaps equally or more importantly HTML ability, the ability to break down sections into components and think about how smaller parts become a whole, just like any other website work."

Developing a Small World in Three.js

Lee Martin created a Spotify app in support of Metronomy’s new album, "Small World" and shares the details on how it was done in this detailed Medium tutorial complete with a Pen demo.

Bendy SVG Button

GSAP champ Craig Roblewsky demonstrates how to use the MorphSVG plugin to create a button with a cute smiley curve on hover.

Color-Contrast() - Target Contrast Ratio Demo

Daniel Yuschick gives us a peek at some future CSS powers. "Using the CSS color-contrast() function, we're able to define our target contrast ratio." Pop open this Pen in Safari Tech Preview to give it a try!

Light/Dark Toggle with Morphing Icon

"A color scheme switch featuring an icon that morphs according to the theme and an inverting curtain. Based on a Dribbble shot by Anthony Fomin." From Jon Kantner.

124. grow anim

ycw continues a series of intricate, organic Three.js scenes with this spellbinding animation of the growth of a spiraling fern.

DataStax

Develop FaaSter than ever! Pairing serverless FaaS and DBaaS delivers the true power of autoscaling.

DataStax

Why is Cassandra suddenly winning with cloud native developers? Download the 3rd edition eBook today and find out - don’t get left behind.

Extra News