February 10th: Lights, Landscapes, and Lines
Newton's Light Bulbs
jh3y animates a Newton's Cradle made of lightbulbs with Greensock in this luminous Pen.Sponsored:
Powerful Feature Flag Management
Embrace continuous deployments with CloudBees Rollout. It's the safest way to deliver new features to any customer, at any time. Free Trial.
CSS Arcade Typography: Snow Bros. (1990)
"Pixelated typeface from the arcade game Snow Bros. drawn in CSS" by Lynn Fisher, as seen in Toshi Omagari's "Arcade Game Typography".
#CodePenChallenge: Lines and Direction
February's challenge theme is "The Elements of Design", and we kicked it off with lines & direction. Check out the Pens from week one, including ycw's series of animated shapes and curves made with shimmering lines.
Toshiya Marukubo's peaceful winter is a bit different every time you look at it, thanks to its randomly generated snowfall and trees.
Card Hover Interactions
"Hacking together a solution to show part of an element in a card as a default state, lining up the element headline across each card and then animating the element to the center of its parent element." From Ryan Mulligan.
CodePen Radio #254: Design Tools
Klare and Chris talk about the design tools used at CodePen, and why we landed on the apps that we did.Sponsored:
Smashing Conf SF 2020
Let’s rock’n’roll! For SmashingConf SF 2020, April 21–22, we’re bringing back two full days packed with front-end, UX and all that jazz! Live sessions on performance, accessibility, interface design, copywriting, designing for emotion, debugging and fancy CSS/JS techniques — and a few surprises along the way.
Flowing Image - How To
Louis Hoebregts takes you step-by-step through the process of creating a "flowing" particle image with p5.js. Use the slider at the bottom of the screen to move through each step and watch the image start to flow.
TIL: CSS Media Queries
Gift Egwuenu takes a tour through the Media Queries Level 5 spec features prefers-color-scheme, prefers-reduced-motion, prefers-contrast, prefers-reduced-transparency, and prefers-reduced-data in this post on Dev.to.
A playful toggle switch from Chris Gannon, built with a little help from Greensock (and gravity).
Stepping Feet illusion
Dev Loop brings a viral mindbending illusion to CodePen in CSS. Watch what happens when the black lines fade to gray.
A Web Dev's Valentine
"Show some love to that special person who gives your plain look much needed style." by Matt Smith, inspired by a greeting card design by PopAndShorty on Etsy.
Tigran Sargsyan serves up a steaming cup of SVG coffee in this highly-caffeinated Pen.