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.Sponsored:
You should probably learn React.
CSS Calla Lillies
Laura Culham's beautiful bouquet of vanilla CSS calla lilies brightened up the Picks over the weekend!
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.