June 21st: Playable Burger Drums, Directionally Aware Buttons, and Slider Styles
Auto-translate MongoDB queries
With Studio 3T convert MongoDB, aggregation, & SQL queries to Node.js, Java, Python, C#, PHP, Ruby, & the mongo shell language in one click.
This one goes out to everyone who's ever wanted to play drums on a burger. Steve Gardner cooked this musical marvel up with Alex Trost on Component Carousel!
Tiffany Choong illustrates & animates the transformation from demure Retsuko to her heavy metal alter ego Aggretsuko with CSS.
#CodePenChallenge: Shopping Layout
For week two of the Layouts challenge, we went shoe shopping! Check out the Pens from this e-commerce layout challenge, including ales_codes' bright & bold design.
Lost at Sea
dilums recreates the welcome screen from the game "Overboard" with Pixi.js.
CodePen Radio #320: Andy and Una from Google’s Learn CSS Project
Chris Coyier is joined by Andy Bell and Una Kravets to talk about Google's "Learn CSS" project, which includes tons of embedded Pens to help new developers and seasoned developers who are new to CSS get started.
Generative Quadtree Based Grid Layouts
"Generative layouts created using random quadtrees, very much inspired by Pentagram's work on Graphcore's branding" from George Francis.
On their latest livestream, The Keyframers animate a real gem of a slider inspired by a Dribbble shot by Ahmad Sulaiman for Plainthing Studio. Check out how the diamond reacts to the speed of your slide!
Emmanuel Meinike takes inspiration from the hand-drawn motion of Saul Bass title sequences in this charming retro Pen. Press space to regenerate a new set of shapes, or C to recolor the scene.
Pokemon Battle (Pure CSS)
Elizabeth Diang animates a Pokemon battle with CSS, inspired by an illustration by leaphere on Instagram. "It was fun to try new techniques, including mixins for building 3D shapes, and box shadows to enhance details."
Astap showcases a set of harmonious color palettes in a tetris-like display.
Directionally Aware CSS Buttons w/ React
Hover over these "directionally aware" buttons from any direction and the fill animations will react based on where you hover. Built by Jhey Tompkins with React.
Styled Native Input Range #46
Ana Tudor reworks a skeumorphic slider from 2015 with 2021 technology. Check out the Pen description for an in-depth look at what's changed and how it works now.Sponsored:
Connect your repository. Add your build settings. Deploy your website. Netlify is the fastest way to get a site live and supports any type of site with a Jamstack architecture. With static global CDN hosting, it is the fastest possible way to host.