September 16th: Seas, Storms, and States
Generate an inspiring mountaintop scene for yourself with Kyle Wetton's picturesque procedural Pen.Sponsored:
Feature Flag Management Made Simple
Easily manage and deploy features across different users or segments to get instant feedback on how customers are using it in production.
Variable Fonts Experiment
Supremo shares two cool image carousel designs that take advantage of the animatable magic of variable fonts.
#CodePenChallenge: Five Lines
It's amazing what you can do with just a little bit of code! The constraint for the second week of September's "Limitations" challenge was five lines of HTML, five lines of CSS, and five lines of JS. Check out the Pens from the challenge, including Pogany's lovely piece "5 lines of code".
CSS Empty States + Custom Properties
"Use custom properties for string values to create default/global empty state text which you can override per-component using pseudo elements (:after) and pseudo classes (:empty)". A fun CSS trick from Una Kravets.
The Bright Stuff
Stacie Arellano shares a primer on understanding web accessibility color contrast guidelines, with an embedded interactive tutorial with retro-gaming flair!
CodePen Radio #236: Private by Default
We've got a small feature update to talk about that's a big deal to some folks: private by default. Chris & Marie talk about how we added this option and the steps we took to validate and notify users about the feature.
Flying fish jump in and out of a dark sea in this lovely Pen from K-T.
Kristopher Van Sant shares a beautiful SVG portrait of Deet from The Dark Crystal: Age of Resistance.
Triangle Storm - Generative Art
"Click to regenerate the triangles! This generative art demo populates a 20 x 40 css grid with triangles. The chances of a triangle being displayed increase with the number of rows. If a triangle is displayed, it's given a random transparency. Upon click, the triangles get regenerated and a css animation introduces them to the dom" from Rob DiMarzo.Sponsored:
React for Beginners
ThreeJS Moon – Textures by NASA's Scientific Visualization Studio
Michael Gehrmann experimented with ThreeJS and the CGI Moon Kit provided by NASA to create a rotating replica of our moon. Drag the moon to check out every side!
Adir-SL animates a stately grandfather clock with good ol' pure CSS.
With Your Eyes Closed
Wake a snoozing Snorlax with a Poke flute in this adorable Pen from Tiffany Choong.