August 3rd: Locks, Lakes, and Loaders
Yusuke Nakaya animates an idyllic scene with SCSS. Watch the bubbles from the oars fade away as the rower rows across an endless lake.
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?"
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!
Yuhomyan sets out an assortment of candied buttons with satisfying hover animations.
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".
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!
"Experimenting with SVG avatars configurable through CSS variables. Click to randomize styles." From Lea Rosema.
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.
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.
Niels Voogt demonstrates how to use the HTML `details` and `summary` elements for help text on a form.
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.
Zoom in on Kasper De Bruyne's little floating world to check out its inhabitants — three blocky bunnies hoppin' around in the forest.
- 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".