We need a "Mad CSS Working Group" edition 😁
07.03.2026 09:04
👍 9
🔁 0
💬 1
📌 0
codepen.io/beta
06.03.2026 20:15
👍 80
🔁 22
💬 3
📌 7
border-shape is going to be a lot of fun! 👀
Stay tuned ...
06.03.2026 19:04
👍 74
🔁 2
💬 0
📌 0
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...)
06.03.2026 13:18
👍 116
🔁 17
💬 8
📌 2
Here is a @codepen.io demo to compare the shape() implementation with the corner-shape one. Very close to each other.
codepen.io/t_afif/pen/K...
05.03.2026 18:27
👍 15
🔁 1
💬 0
📌 0
a CSS-only idea? 🧐
05.03.2026 21:18
👍 1
🔁 0
💬 1
📌 0
Here is a @codepen.io demo to compare the shape() implementation with the corner-shape one. Very close to each other.
codepen.io/t_afif/pen/K...
05.03.2026 18:27
👍 15
🔁 1
💬 0
📌 0
It appears that I accidentally implemented the Squircle shape with my new generator! 👀
I extracted the code and added a variable to easily control the radius.
css-tip.com/squircle/
05.03.2026 11:12
👍 8
🔁 0
💬 0
📌 1
minimal demo: codepen.io/t_afif/pen/G...
Body and tooltip are inside the same containing block , body has relative and tooltip fixed so tooltip is laid out after so at the end the anchor is laid out before and it works.
04.03.2026 23:12
👍 0
🔁 0
💬 0
📌 0
If your anchor is having pos: absolute and is after the Tooltip, then it's dead ... The only solution in this case (a crazy one) is to make the tooltip have pos: fixed and body have pos: relative so you trap the anchor inside a containing block (body) and tooltip is outside of it.
04.03.2026 23:10
👍 0
🔁 0
💬 1
📌 0
Demo: codepen.io/t_afif/full/... via @codepen.io
04.03.2026 09:14
👍 9
🔁 4
💬 0
📌 0
To celebrate the new "border-shape" property being tested in @developer.chrome.com I made a nice little tool for helping you generate CSS shape functions.
Try it here:
ailab.nordcraft.site/pen-tool
04.03.2026 14:29
👍 22
🔁 3
💬 3
📌 0
Demo: codepen.io/t_afif/full/... via @codepen.io
04.03.2026 09:14
👍 9
🔁 4
💬 0
📌 0
Something to play with.
03.03.2026 16:23
👍 2
🔁 1
💬 0
📌 0
And it's live!
A new CSS generator for fancy frames (Squiggly, Ragged, Wavy, Torn, etc.). Powered by shape() and ready for border-shape as well!
css-generators.com/fancy-frame/
It's responsive and works with any elements, including images.
Play with the settings and show me your best frame 👇
03.03.2026 14:02
👍 32
🔁 4
💬 1
📌 4
And it's live!
A new CSS generator for fancy frames (Squiggly, Ragged, Wavy, Torn, etc.). Powered by shape() and ready for border-shape as well!
css-generators.com/fancy-frame/
It's responsive and works with any elements, including images.
Play with the settings and show me your best frame 👇
03.03.2026 14:02
👍 32
🔁 4
💬 1
📌 4
Now that's what I call a select demo.
03.03.2026 10:43
👍 18
🔁 2
💬 1
📌 0
Don't give me such ideas 😆
03.03.2026 10:37
👍 1
🔁 0
💬 0
📌 0
This is the kind of content I’m here for 😂
03.03.2026 01:59
👍 36
🔁 2
💬 0
📌 0
I already predicted this gonna happen 😅
I listed/detailed all the tricky cases and why they happen (and how to fix them when possible) 👇
bsky.app/profile/css-...
02.03.2026 22:34
👍 6
🔁 0
💬 1
📌 0
It's a good time to read my four-part series. A lot of tricks and cool examples!
css-tricks.com/better-css-s...
02.03.2026 20:44
👍 23
🔁 1
💬 0
📌 0
this is hilarious.
You SAID we could style <select> now DAD.
02.03.2026 16:40
👍 54
🔁 5
💬 0
📌 0
give me randomness and I will give you different guns, different targets, different everything 🤩
02.03.2026 17:58
👍 8
🔁 0
💬 0
📌 0
It seems we can now customize the select element, right? right?!
Demo: codepen.io/t_afif/pen/P... via @codepen.io
02.03.2026 13:44
👍 369
🔁 82
💬 11
📌 13
10 Cool CodePen demos
10 Cool CodePen demos from February 2026
10 Cool Codepen Demos: February 2026
alvaromontoro.com/10-cool-code...
3D animations, particles with Three.js, shaders, color pickers, games, impressive graphs with CSS... and more!
#webdev #javascript #html #css #codepen
01.03.2026 18:49
👍 6
🔁 2
💬 0
📌 0
Another custom select list using using appearance: base-select.
On browsers that don't yet support this, a normal select list will be displayed.
See the full demo on @codepen.io codepen.io/cbolson/pen/...
28.02.2026 11:43
👍 40
🔁 5
💬 3
📌 1
At this point, all the shapes get crazy 😆
01.03.2026 13:33
👍 0
🔁 0
💬 0
📌 0
"jagged" is not bad but looking at the description it seems for spiky, sharp stuff while in my case, it's soft and wavy. Maybe "ragged" or 'torn" is better in this case.
01.03.2026 13:22
👍 1
🔁 0
💬 0
📌 0
Too many words I don't know 😅
01.03.2026 13:11
👍 0
🔁 0
💬 1
📌 0
