CodePen Monthly Challenge: November Recap


November of 2025 made CodePen challenges all about overviewing CSS innovations. Not a fan, honestly, as I’m about as far away from a “decent coder” as it gets. Looking at it pragmatically: trying to use a feature that’s barely supported on half the web is just a headache.

Another bit of my skepticism comes from the “is this actually usable?” factor. In theory, a lot of this sounds cool, but if the only use-case is as “new” as some posh phone brand’s “innovative features” that Android had a decade ago… well, it feels more like a tech-show for LinkedIn bros who don’t actually know how things work.

Since I’m more of a creative director role wannabe coder, I did use some AI to help me actually build these out. But one thing did genuinely rub me the right way: the clip-path possibilities. It’s such a nice tool for that low-poly vibe.


Week 1: 🍠 CSS Shape

The first week was about creating a Pen using shape() or corner-shape. For this, I chose to make a low-poly looking pomegranate. As the Spooktober challenges proved that playing with shapes is actually fun, this was a pretty enjoyable process.

Unlike limiting yourself to just the border-radius asset, clip-path gives way more flexibility to actually build new shapes.

See the Pen 2D Pomegranate by Giedre Ju (@Giedr-Ju) on CodePen.


Week 2: ✒️ Custom Select (🌟 CodePen Pick 🌟)

Next up was a digest on the new features for selection menus. We’ve all seen those nasty default select menus—sometimes the most annoying part of dev is not being able to change things that have looked the same for ages.

The prompt was simple: create a custom select menu using appearance: base-select. Of course, since most browsers don’t actually support this yet, the idea sounds a bit better than it works in practice. Still, it’s a cool upgrade.

I went with a grocery bag looking like a cartoonish select menu that actually changes the background depending on what you pick. CodePen gave the idea a thumbs up, and I even landed a “Pick” for it!

See the Pen Groceries by Giedre Ju (@Giedr-Ju) on CodePen.


Week 3: 🧑‍🍳 New CSS Functions

For the 3rd challenge, it was about using CSS if() or custom functions. This one was complicated since they aren’t widely supported yet. Looking at it from an “idea level”—it’s nice. But practically? If it’s not a direct replacement for something already troublesome, I have to ask: what’s the point?

To be honest, this week was a bit of a failure on my end. My idea for a low-poly “watermelon ripe-o-meter” turned out to be way too complex for these specific functions. The goal was to have the watermelon change its ripeness as the screen width changed or when a button was clicked. Oh well… you win some, you lose some.

See the Pen Ripe-O-Meter: Watermellon by Giedre Ju (@Giedr-Ju) on CodePen.


Week 4: 🧑‍🌾 2025 CSS Harvest (🌟 CodePen Pick 🌟)

And the final challenge—plus my second CodePen Pick this month! The prompt was to create a Pen using a new CSS feature that first appeared (or went Baseline) in 2025.

Once more: nice idea, but when it’s not widely supported, it’s a bit of a headache. But since this month had a “harvest” theme, I made a mushroom that changes from day to night with a click. It’s a simple, fairy tale book-style animation—reminds me of those old games with silly pixelated images. Not the posh ones, more like the 2000s-era internet vibe.

See the Pen Mystic Mushroom by Giedre Ju (@Giedr-Ju) on CodePen.


TL;DR;

November was all about “CSS Innovations.” Cool in theory, but as a creative director wannabe coder, I’m skeptical. If it isn’t widely supported, it mostly feels like a show-off for tech bros. I used AI to bridge the gap between my vision and the syntax.

Landed two CodePen Picks! One for a cartoonish “grocery bag” select menu base-select and another for a ”00s internet vibe” mushroom that swaps from day to night.

My “watermelon ripe-o-meter” was a bit too ambitious for the new CSS if() functions.

I’m still a fan of the low-poly aesthetic. Using clip-path for organic shapes like pomegranates and mushrooms is much more satisfying than fighting with browser-unsupported code.