Because someone hearted this old @codepen demo done with 2 radio buttons + their labels in a group and it made me notice the title still said "smooth transition Chromium only" - it's been working cross-browser since the summer of 2024! 🥳🎉🎇

https://codepen.io/thebabydino/pen/BadeGMp

#CSS #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #code #frontend

My most hearted @codepen demos of '26:

✨ Pure #CSS #3D animated carousel https://codepen.io/thebabydino/pen/dPXVyqN

✨ Scatter & #pixelate CSS gradient https://codepen.io/thebabydino/pen/zxBrmdL

✨ Cards with concave rounding on irregular grid https://codepen.io/thebabydino/pen/WbxpKPQ

First two need very little code and are heavily commented.

#SVG #filter #svgFilter #code #coding #cssTransform #cssTransforms #css3D #cssGradient #cssGrid #layout #cssLayout #cssSubgrid #frontend #web #dev #webDev #webDevelopment

Torn on @codepen: https://codepen.io/thebabydino/pen/XWQQKJd

Absolutely no text duplication whatsoever, not in the markup, not in the `content` of any pseudo. No images save for the "newspaper" background (which doesn't include the torn edges, screen #2) and for #CSS gradients.

Just some #SVG #filter magic! 🪄✨

#svgFilter #cssGradient #textEffects #code #textEffect #coding #frontend #web #dev #webDevelopment #webDev

Multilayer candy effect with no text duplication. In fact, this is contenteditable, no JS required 🐱

Check out the live demo on @codepen https://codepen.io/thebabydino/pen/XWOvWqM

Just a bit of #SVG #filter magic! 🪄✨

#svgFilter #cssGradient #code #coding #web #dev #webDev #webDevelopment #CSS #frontend #textEffect #textEffects

Different `backdrop-filter` effect for navbar vs. its buttons - how would you get this result?

Think about it for a little bit before checking my solution, which you can find on @codepen https://codepen.io/thebabydino/pen/NPrjRpr

PS: I really wanted to make this #CSS only, even if SVG filters can do better.

#filter #cssFilter #cssGradient #cssMask #web #dev #webDev #webDevelopment #code #coding #frontend

How would you create such a sliding glow effect on `:hover`? Trivial with `corner-shape`, but what about making it work cross-browser now?

Think about it, then check my solution on @codepen https://codepen.io/thebabydino/pen/EayVXKj

Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. This way you get to both become smarter and support my work so I can continue coding.

#CSS #cssGradient #cssMask #coding #cornerShape #code #frontend #Maths #web #dev #webDev #webDevelopment #trigonometry

A little thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen demo
https://codepen.io/thebabydino/pen/ExvNBRY

Detailed explanation of the how behind in this @csstricks post https://css-tricks.com/css-ing-candy-ghost-buttons/

Bonus: a hover animated, Chrome-only version https://codepen.io/thebabydino/pen/VwzpMxV

#CSS #cssGradient #cssMask #coding #web #dev #webDev #webDevelopment #code #frontend #clipPath #cssClipPath

RE: https://mastodon.social/@anatudor/115650006455384500

Because someone just hearted this @codepen demo: https://codepen.io/thebabydino/pen/QwNwWOJ

It was made for a recent article I wrote - check it out, I promise you'll learn something you didn't know before! 👇

#CSS #filter #SVG #cssFilter #svgFilter #cssMask #cssGradient #coding #frontend #web #dev #webDev #webDevelopment #code

Some glassy pure #CSS buttons with a single button element - check them out on @codepen https://codepen.io/thebabydino/pen/JBrNEx

#code #coding #cssGradient #frontend #web #dev #webDev #webDevelopment