November 5th: Beats, Boxes, and Barcodes
Droppy Woppy Input
Start typing into Steve Gardner's Pen to see your text transformed into some casually sorted packages.Sponsored:
DigitalOcean $100 Credit
Deploy apps on the most developer-friendly cloud platform with industry leading price-performance. Test out DigitalOcean with $100 credit
Build A Cool Thing (Street Fighter Website)
toomuchome recreated the iconic Street Fighter title screen with CSS, and shares the details on how it all came together in this Medium post.
Scroll through the images to experience the shifting textures in this stunning design concept from Jesper Landberg.Sponsored:
Percy: Automated Visual UI Testing
Catch visual bugs before your users do. Percy’s all-in-one visual testing solution makes it easy to test your UI across browsers and responsive breakpoint widths and review all visual changes with a single click. Get started with our free 14-day trial.
CodePen Radio #197: Halloween Special
On Halloween we shared our spookiest and weirdest bug stories. Marie, Cassidy, Rachel, Chris, & Stephen told bone-chilling tales of software horror.
Codevember is back for 2018! Get your daily challenge prompt and create a code "sketch" based on that prompt to take part in this coding community event.
Custom Image Slider
Jarrod Thibodeau "wanted to experiment with this prototype of image slicing and combining the pieces together to create the full image in a slider."
Pure CSS Barcode (UPC-A)
"Just a plain UPC-A barcode" built with multiple box-shadows by Nick Matantsev.
Neural Beatbox (alpha)
"Make some noise and record your voice! Deep Learning models will analyze and build a drum kit, then start generating drum patterns infinitely with your sound" in this incredible Pen from Nao Tokui.
Dump Truck Loading Animation
"A download animation where dump trucks pour dirt into a box, which represents downloaded data" from Jon Kantner.
Vanishing Animated SVG Filter Logo
Rafael Castro Couto demonstrates how to make SVG text disappear in a puff of smoke in this magical Pen.
Gallery with Pug, Vanilla JS & CSS
Ana Tudor builds a striking image gallery with grid layout, CSS variables, clip-path, and transform.
Have You Ever Been Lonely?
In collaboration with Angelo Plessas, Gerard Ferrandez created this Pen "about two robots that dance intensely at night [that] speaks on balance, togetherness and silence."