August 3rd: Locks, Lakes, and Loaders
Only CSS: Summer Dream
Yusuke Nakaya animates an idyllic scene with SCSS. Watch the bubbles from the oars fade away as the rower rows across an endless lake.
CSS Mastermind
Alvaro Montoro builds a fully playable Mastermind game with CSS! "here are 6 colors and a 4-length code to decipher. Can you break the code?"
CodePen Radio #278: Community Creativity
Chris and Marie talk about the creativity in creations they’ve seen on CodePen, including photo effects, water droplets, live streaming code, and making sheep!
Candy Color Button Animation
Yuhomyan sets out an assortment of candied buttons with satisfying hover animations.
#CodePenChallenge: Flutter Custom Painter
For the final week of the July challenge, we worked with Flutter's CustomPainter class. Check out the Pens from week four, including A Flutter Dev's Escher-inspired "Flutter Cube".
CSS3 Loader & Spinner
Take a spin through Vineeth.TR's gallery of loaders and spinners next time you need something fun for people to watch while they wait!
SVG Avatars Configurable Through CSS Vars
"Experimenting with SVG avatars configurable through CSS variables. Click to randomize styles." From Lea Rosema.
JS Lock Picking Game
Peyman shares a mini-game inspired by the lock picking mechanics in Uncharted. Move your mouse around the circle until the lock starts to shake, then hold it for 5 seconds to set the pin.
Jumping Gooey Navigation
A gooey highlight jumps between navigation items in Craig Roblewsky's Pen. Try jumping from one end of the row to the other! And check out the full tutorial on how it was made on Craig's site.
Details Element for Help Text
Niels Voogt demonstrates how to use the HTML `details` and `summary` elements for help text on a form.
Glowing Slinky
Jon Kantner's recreates the fun of a glowing slinky toy in this CSS animation. Take a look at the comments in the code for a breakdown of how the slinky rings move.
Floating island /w Threejs & GSAP
Zoom in on Kasper De Bruyne's little floating world to check out its inhabitants — three blocky bunnies hoppin' around in the forest.
Extra News
- Stéphanie Walter shares a tutorial on Designing Adaptive Components, Beyond Responsive Breakpoints.
- Turn your mic on for Angela Galliat's Audio Reactive Visualization!
- Alex Taietti introduces Lappy, "a little piece of JS that allows you to track the relative position of single or multiple HTML elements and trigger different callbacks for specific stages of the contact".