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

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

Also, if you're on actual Safari, could you let me know if the `backdrop-filter` gets applied correctly?

I tested in Epiphany & seemed fine, but someone said it's not working because of the lack of the `-webkit-` prefix?

As far as I know, that should not be the case and it's not the case from my Epiphany testing for other demos as wll, not just this one, but if anyone has more info, let me know.

If you can't test yourself, boosts appreciated.

Thanks!

#CSS #filter #cssFilter #cssMask #coding

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

Cool concave rounding header component on @codepen: https://codepen.io/thebabydino/pen/azOgOKE

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

Avatar border effect. Single `img` element (so no pseudos), minimal #CSS. Real transparency between actual image and border.

Live on @codepen https://codepen.io/thebabydino/pen/RwKyzKQ

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

If 2 in 1 isn't enough, here's a 3 in 1 demo on @codepen: 3 cross-browser approaches (so no `corner-shape`) for getting a scooped corners, responsive shape with a border: https://codepen.io/thebabydino/pen/pvomayr

Includes a list of pros & cons for each.

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