This week: Helpful Buttons, CSS Perpetual Motion, and an Algorithmic Puppy
Newton's CSS Cradle
Amit Sheen crafts a marvelous CSS rendition of the Newton's cradle perpetual motion machine.
Tiles with a Mediterranean vibe
Click to generate a new tiled pattern in striking blue and white in this Mediterranean-inspired Pen from nszafraniec.
Magic area on hover/focus
"This magic area micro-interaction provides users visual feedback on which container they are hovering at the moment. This works on both hover and focus event." From Ryan Yu.
Search Algorithm Puppy
Masahito Leo Takeuchi shares one smart pup that can find the best path to a bone no matter where you throw it in the maze! "The algorithm is based on the A* search algorithm."
Lea Rosema continues the #anydayshaders with this beautiful Pen flooded with molten metal. "Uses the fbm function in The Book of Shaders by Patricio Gonzalez Vivo, but with the cheapNoise function as input from my anydayshaders 23 demo, and with configurable parameters."
The Falcon Funko Pop (in pure CSS)
inescodes molds CSS into a perfect replica of a Funko Pop doll, right down to the glossy shine on the Falcon's "plastic" boots!
Upload Button w/Progress
"An upload button concept where a progress bar is wrapped around the button and accompanied by a counter" from Jon Kantner.
#CodePenChallenge: Sea Creatures
Week two of May's Animal Kingdom Challenge was all about sea creatures, and the community really made a splash! Check out our Collection of Pens from the second week including Dilum's luminous "Dolphins at Dawn".
CodePen Radio #315: Support Success
Chris and Marie are on to talk about the work that went into reducing overall support ticket volume and response time at CodePen, from the kinda obvious stuff like "fixing bugs", to the not-so-obvious things like changing the phrasing on microcopy to help clarify the scope of support.
GSAP Enhanced Checkout Button
Ryan Trimble shares a pair of checkout buttons with helpful success and error states, super-powered with GSAP.
CSS Gradient Infinite Rainbow
A mellow wave of "infinite rolling rainbow with CSS-gradients and SASS-loops" from danne32.