September 9th: Glass, Galleries, and Golf
Quirky Art Gallery: Three.js with SVG Loader
Rise and shine with Anna the Scavenger's work of surrealist art, built with three.js and SVG.Sponsored:
An Event Apart
To design a better web experience, attend a better-designed web conference. An Event Apart is three days of design, code, and content taught by absolute masters—the people who shape our medium. Join us in Denver, San Francisco, or Washington, D.C.... and set yourself Apart.
September's #CodePenChallenge is all about limitations: each week has special design constraints. For the first week, the CodePen community just had 100x50px of space to play with! Check out the Pens from the "Think Small" prompt, including Jeff Wilkey's tiny tour of the solar system.
CSS Grid: Magazine Layouts
"Wanted to do some magazine layouts, so I decided to create a Marvel Magazine. I regret everything". A captivating collection of print-style pages built with CSS Grid by Olivia Ng.Sponsored:
The ideal way to experience WordPress. Jetpack is a WordPress plugin that provides incredibly useful features like backups, security scanning, image performance, social media integration, Markdown support, and more.
Generative Poster V (CSS)
David A. continues an exploration of generative posters with this myterious, wiggly creation. "Done using border radius, inspired by Zach Lieberman's work!"
"Introducing the next evolution in volume knobbery - with Volume Golf, you'll never have to separate your hobbies from your UI controls ever again!" A little bit of questionable UX from Sam Barnett.
CodePen Radio #235: Blocking
Chris and Klare talk about the planning and process of building a blocking feature for CodePen.
CSS - Frosted Glass
Kyle Wetton weilds a bit of CSS magic to create a frosted glass effect in this lovely Pen.
Scroll Experiment #2
"As the user scrolls the height of a CSS Grid is increased allowing previously collapsed rows to display. The only animation is on the height of the grid and the position of the grid in relation to the top of the page" from Andy Barefoot.
Animated Verbs II
"A second take on animating characters in verbs to represent their action. Leave a comment if there's a word you'd like to see added and animated on this list" from Ryan Mulligan.
Pixi Sprite Bubbles
"Sprite bubbles with displacement map for water effect." A delightfully carbonated Pen from Juan Fuentes.
Collab Mode Extravaganza!
The #PassThePen crew had a collab mode party, and this glorious Pen is the result! Check out the Pen description for a list of all the participants and link to the Twitch channel so you can be there next time!
U R OK Computer
Sometimes it's nice to get a little reassurance from your computer. Ava Bakuie translates Talia Blanton's Dribbble shot to CSS in this perfectly pixelated Pen.