codepen.io/beta
06.03.2026 20:15
👍 57
🔁 21
💬 2
📌 7
codepen.io/beta
Amazing how we went from not being able to style selects, to doing things like this with them codepen.io/editor/cbols... (and this codepen.io/t_afif/pen/P...)
The 2026 F1 season is here 🏁
So I built another experimental custom <select> — this time featuring F1 drivers.
See the demo on @codepen.io
codepen.io/editor/cbols...
Think you’re looking down a long corridor?!... Think again.
An optical illusion in pure #CSS. 😵
Inspired by the amazing work of @akiyoshikitaoka.bsky.social
Live demo on @codepen.io: codepen.io/editor/amit_...
Build your bracket for the world's first ever CSS tournament, March MadCSS.
Premieres Friday 10ET on YouTube, and the stakes are high.
win over $1,500 worth of prizes madcss.com
Soon across all browsers: CSS contrast-color()!
It returns a color that has guaranteed contrast against an other color.
Very useful for computing text color with enough contrast against an unknown background.
Demo ➡️ codepen.io/captainbross...
Docs ➡️ developer.mozilla.org/en-US/docs/W...
To demonstrate the opposite nature of the colors orange and blue, an orange pencil lays on the blue half, and a blue pencil lays on the orange half, of a diagonally divided blue and orange ground.
The March CodePen Challenge is on!
This month, we're working with front-end opposites
codepen.io/challenges/2...
team i'm FIRED UP about these gnarly gotchas with Anchor Positioning in CSS.
CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…
"OctaVase" by Paul
codepen.io/prisoner849/...
CSS is getting native randomness 🎲
random() and random-item() are coming with:
- per-element randomness
- step-based ranges
- shared value options
- zero JS required
I wrote an overview of the feature, how it works, and what browsers support it.
alvaromontoro.com/blog/68092/n...
#css #webdev
"Page flip!" by Liam Egan
codepen.io/shubniggurat...
Most comments are just impressed, but there was a small wave of people complaining about how CSS shouldn't be able to do this, and that it should be for *styling* only (emphasis theirs).
The thing is... all this simply opens the doors to styling in more robust ways.
youtu.be/Y-3tPDZCk2o
A multicolor gradient reminiscent of a sunset with blues, golds, and pinks.
It's the final week of the February CodePen Challenge!
Let's play with new colors 🎨
codepen.io/challenges/2...
AIM (Anchor Interpolated Morph) is a pretty cool idea from Adam.
argyle.ink/anchor-inter...
Here I'm using it for a [popover]-powered image gallery where the thumbnails open full-size images. They animate from where they were, and close back to where the were as well.
Officially shipping in Chrome 147 🎉
Out with :nth-child(), in with :sibling-index()! Just so satisfying to use.
* no Firefox yet
To kick off my new article series, #WebAccessibilityFails, I decided to focus on a bad practice I often see in main navigations during accessibility audits.
matuzo.at/blog/2026/ar...
First time I am using the @codepen.io V2 in that article 👇
I no longer need to create a new pen for each tiny CSS change. One pen can hold all my demos with one CSS file.
With my PRO account, I can have up to 50 demos! 😀
codepen.io/beta
"Chicky" by Takane Ichinose
codepen.io/takaneichino...
I've been experimenting with an upcoming CSS feature called border-shape lately.
It's really cool what you can do with it: lots of practical applications + it opens a lot of doors for non-rectangular UIs!
Try it in Canary w/experimental web platform features on, & read more:
una.im/border-shape
A few recent additions to the ol' Almanac to distract you on this lovely Friday:
❋ The sign() function
css-tricks.com/almanac/func...
❋ The progress() function
css-tricks.com/almanac/func...
❋ The abs() Function
css-tricks.com/almanac/func...
That progress() one... just wild.
"Data Tunnel - Three.js" by Sabo Sugi
codepen.io/sabosugi/pen...
Blog post: some inner workings of implementing CSS corner-shape in Blink.
@developer.chrome.com
developer.chrome.com/blog/impleme...
Magnetic lines. Canvas. Spring physics.
All vibes.
Inspired by a linear billboard.
"Picket fence animation using scroll animations" by Chris Bolson
codepen.io/cbolson/pen/...
In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing).
Drag the nodes, and the shortest path will update in real-time!
css-tip.com/graph-theory/
A fun demo powered by all the modern & cool CSS features 🤩
A person mixing different colors of paint on an artist's palette.
The February CodePen Challenge continues!
This week, we're mixing and blending colors 🎨
codepen.io/challenges/2...
🎉 New Blogpost 🎉
Style Headings using the CSS :heading pseudo-class
CSS just got tidier.
Say goodbye to verbose selector groups and hello to cleaner, more intentional styling for your design systems.
www.alwaystwisted.com/articles/sty...
#CSS #WebDev #FrontEnd #WebDesigin
