October 9th: Connections, Concepts, and Beautiful Mistakes
Pure CSS Connect Four
An impressive display of the power of the :indeterminate pseudo-class and CSS counters, by Bence Szabo
Sponsored:
Modular, embeddable content management
Add CMS functionality to any website, on any platform. Make content & code edits quickly, and empower non-technical users to edit content themselves
Portrait
The #inktober crossovers are starting to appear on CodePen! Lisi shares her SVG self-portrait.
CSS Grid Responsive Perspective Layout
"A CSS Grid layout using CSS perspective to give a 3D effect," populated with Pitchfork's top 40 albums of the 90s. By Andy Barefoot.
Recreating “Yoshi’s Island”
Ben Matthews writes about how he recreated the title scene from Yoshi's Island with JavaScript in this detailed blog post.
UI Motion - Shopping Cart Concept
Nerdmanship demonstrates a bit of shopping delight in this UI concept for ecommerce.
Lotus CSS Animation
Gabrielle Wee's experiment with 3D transforms yields a serene scene.
CodePen Radio #145: Preprocessors and Lambda
Tim H., Alex, and Marie are on to talk about preprocessors on CodePen — how they work, how we maintain them, what we do when a preprocessor becomes obsolete, and some thoughts on the future of preprocessors on CodePen.
Baby | HTML + CSS
Decisions, decisions! Cameron Fitzwilliam translates a Dribbble shot by Misha Petrick into HTML & CSS.
Beautiful Mistakes: Coming Up with Unconventional Layouts with CSS Grid
"The awesome thing about these accidents is that it results from a bug in my code but the bug leads to beautiful ideas." Ren Aysha writes about discovering an interesting layout while making "mistakes" with CSS Grid.
Planet Pen
Vangel Tzo drew inspiration from a Dribbble shot by Julien Clauzier to create this subtly animated celestial Pen.
Day One (Pure CSS)
"Just a simple card flip, toggled by a :checked input field!" by Henry Desroches.