cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv headernumbered-list123split-screen

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.

May 15th: Surf, Sass, and Screenshots

Square in a Circle

"Using mixins and css animation, the batons rotate on a pivot which forms an illusion of a square in the middle", by Raymond Yang.

You should probably learn React.

It's extremely popular for a reason: React is a good fit for the fast, interactive, state-driven websites we're often asked to build as front-end developers. CodePen recommends this course by Wes Bos to upgrade your JavaScript skills.

CSS Calla Lillies

Laura Culham's beautiful bouquet of vanilla CSS calla lilies brightened up the Picks over the weekend!

Lonely Planet

Mariusz Dabrowski's lonely planet perks up when its moon comes into view in this charming animated Pen.

New PRO Feature: Custom Screenshots!

Want to help your Pen stand out on social media? Now you can set a custom screenshot in your Pen settings!

Single Div Accordion (Animated with CSS Variables)

Dan Wilson's animated Pen is not your average CSS accordion! This is Dan's "first attempt at Single Div Art. Wanted to see how Custom Properties (CSS Variables) can help with organization and animation."

Level Up Your Sass with the Ampersand

by hidanielle. "In Sass, the ampersand(&) is like a variable that always represents the parent selector. Paired with nesting, the ampersand allows us to do a lot of helpful things from super simple to when-would-I-ever-actually-do-this complex."

Some Doctors from Doctor Who - Pure CSS

Giulia Cardieri found that "creating hair styles with css is not an easy task" when she animated these minimalist headshots of Doctors Who 9 - 12.

NGL@0.10.0-dev.20 - showcase/viruses

Alexander Rose's Pen demonstrates NGL, a WebGL protein viewer. Check out his profile for more fascinating specimens of molecular visualization.

Responsive Surf Theme

Waldo Broodryk rebounds Robert Mayer's responsive, surfing-inspired website design from Dribbble as a CodePen Project!

CSS-Only Nested Dropdown Navigation

It's always fun to see a Pen that really tests the limits of what you can do with CSS, like Gabrielle Wee's JS-free dropdown menu.

Horizontal Infinite "Out of Synch" Scroll Effect

Scroll down in Julien Lejeune's Pen to see the three rows scroll horizontally and pleasingly out of sync.