#cssmask — Public Fediverse posts

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

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

Missed this, made on the 1st of Jan on @codepen:

✨ Sliding border glow on hover for beveled cards, heavily commented https://codepen.io/thebabydino/pen/EayVXKj

Trivial if we have `corner-shape` support & even simpler with `border-area`. But here it's cross-browser.

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

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

Missed this, made on the 1st of Jan on @codepen:

✨ Sliding border glow on hover for beveled cards, heavily commented https://codepen.io/thebabydino/pen/EayVXKj

Trivial if we have `corner-shape` support & even simpler with `border-area`. But here it's cross-browser.

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

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

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

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

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

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

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

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

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

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

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

One fancy shape, two cross-browser techniques to get it (and no, neither of them is `shape()`, I said cross-browser 😼)

Check it out on @codepen https://codepen.io/thebabydino/pen/zxOjrOO

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

One fancy shape, two cross-browser techniques to get it (and no, neither of them is `shape()`, I said cross-browser 😼)

Check it out on @codepen https://codepen.io/thebabydino/pen/zxOjrOO

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

A fun simple little pure #CSS demo on @codepen: bubbles pattern https://codepen.io/thebabydino/pen/dyeZVNO

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

A fun simple little pure #CSS demo on @codepen: bubbles pattern https://codepen.io/thebabydino/pen/dyeZVNO

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

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

`mask-clip: no-clip` doesn't seem to be supported in Safari, so I've filed a bug https://bugs.webkit.org/show_bug.cgi?id=302080

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

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

`mask-clip: no-clip` doesn't seem to be supported in Safari, so I've filed a bug https://bugs.webkit.org/show_bug.cgi?id=302080

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

Hey, I made a thing for this week's complementaries challenge on @codepen: https://codepen.io/thebabydino/details/myeQXjo

(if you're a Ko-fi/Patreon supporter, you may have already seen the pre-prettified version)

The description has a detailed "behind the demo" explanation.

Enjoy!

#SVG #filter #CodePenChallenge #CSS #cssMask #svgFilter #JS #JavaScript
#code #coding #frontend #controls #web #dev #webDev #webDevelopment

Hey, I made a thing for this week's complementaries challenge on @codepen: https://codepen.io/thebabydino/details/myeQXjo

(if you're a Ko-fi/Patreon supporter, you may have already seen the pre-prettified version)

The description has a detailed "behind the demo" explanation.

Enjoy!

#SVG #filter #CodePenChallenge #CSS #cssMask #svgFilter #JS #JavaScript
#code #coding #frontend #controls #web #dev #webDev #webDevelopment

I made a little thing on @codepen :pure #CSS #scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.

Inspiration https://x.com/avanderpotte/status/1923382432784412771
(via @codrops motion highlights roundup)

cc @bramus

#scrollAnimation #code #coding #frontend #cssGradient #cssMask #conicGradient #cssMaths #maths #scrollEffect #cssGrid #web #dev #webDev #webDevelopment

I made a little thing on @codepen :pure #CSS #scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.

Inspiration https://x.com/avanderpotte/status/1923382432784412771
(via @codrops motion highlights roundup)

cc @bramus

#scrollAnimation #code #coding #frontend #cssGradient #cssMask #conicGradient #cssMaths #maths #scrollEffect #cssGrid #web #dev #webDev #webDevelopment

1️⃣2️⃣ 486 ❤️ Pure #CSS 1 div card backgrounds https://codepen.io/thebabydino/pen/GRRpzNX

Using mask compositing, which I explained in this @csstricks article https://css-tricks.com/mask-compositing-the-crash-course/

Another where I should go through the code and improve it as it can be simplified nowadays... a lot even!

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

1️⃣2️⃣ 486 ❤️ Pure #CSS 1 div card backgrounds https://codepen.io/thebabydino/pen/GRRpzNX

Using mask compositing, which I explained in this @csstricks article https://css-tricks.com/mask-compositing-the-crash-course/

Another where I should go through the code and improve it as it can be simplified nowadays... a lot even!

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

5️⃣ 850 ♥️ No SVG, no image fluid slider https://codepen.io/thebabydino/pen/qByGqOm

#JS used only for
a) feature support detection
b) updating slider value in --val

Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler

One of my best sliders on @codepen.

#CSS #slider #rangeInput #coding #web #dev #webDevelopment #webDev #code #frontend #cssGrid #cssMask #cssGradient

5️⃣ 850 ♥️ No SVG, no image fluid slider https://codepen.io/thebabydino/pen/qByGqOm

#JS used only for
a) feature support detection
b) updating slider value in --val

Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler

One of my best sliders on @codepen.

#CSS #slider #rangeInput #coding #web #dev #webDevelopment #webDev #code #frontend #cssGrid #cssMask #cssGradient

#tinyCSStip `clip-path` or `mask` are applied after `filter`.

This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.

We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.

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

#CSS #filter #cssFilter #clipPath #clipping #cssClipPath #cssMask #coding #frontend #web #dev #webDev #webDevelopment #code

#tinyCSStip `clip-path` or `mask` are applied after `filter`.

This means we cannot clip/ mask, then add a `drop-shadow()` on the same element for the clipped/ masked shape.

We need to apply the `filter` on a parent of the clipped/ masked (pseudo-)element.

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

#CSS #filter #cssFilter #clipPath #clipping #cssClipPath #cssMask #coding #frontend #web #dev #webDev #webDevelopment #code

If what you want isn't beveled, but scooped corners, then you can do it with a `radial-gradient()` mask. You can even add borders too!

Here's a @codepen demo illustrating this https://codepen.io/thebabydino/pen/VYwObZN

Pure #CSS, no SVG.

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

If what you want isn't beveled, but scooped corners, then you can do it with a `radial-gradient()` mask. You can even add borders too!

Here's a @codepen demo illustrating this https://codepen.io/thebabydino/pen/VYwObZN

Pure #CSS, no SVG.

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

Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR

#cssMask #cssGradient #conicGradient #maths #trigonometry #Sass #loader #web #dev #webDev #webDevelopment #code #coding #frontend #cssAnimation

Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR

#cssMask #cssGradient #conicGradient #maths #trigonometry #Sass #loader #web #dev #webDev #webDevelopment #code #coding #frontend #cssAnimation

A little spinner I made years ago on @codepen but never shared publicly https://codepen.io/thebabydino/pen/OJQKbKW

#CSS #loader #spinner #code #coding #web #dev #webDev #webDevelopment #frontend #cssGradient #cssMask #conicGradient #cssSpinner #cssLoader #singleDiv #oneDiv

A little spinner I made years ago on @codepen but never shared publicly https://codepen.io/thebabydino/pen/OJQKbKW

#CSS #loader #spinner #code #coding #web #dev #webDev #webDevelopment #frontend #cssGradient #cssMask #conicGradient #cssSpinner #cssLoader #singleDiv #oneDiv

Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.

As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.

#CSS #code #coding #frontend #web #webDev #dev #webDevelopment #mask #cssMask #cssGradient #conicGradient #cssVariables #cssAnimation

Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.

As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.

#CSS #code #coding #frontend #web #webDev #dev #webDevelopment #mask #cssMask #cssGradient #conicGradient #cssVariables #cssAnimation

Also, let me show you something: search result for "mask-clip mdn" vs. when actually going to the MDN page.

And no, `margin-box` doesn't work.

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

Also, let me show you something: search result for "mask-clip mdn" vs. when actually going to the MDN page.

And no, `margin-box` doesn't work.

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

#tinyCSStip

Ever want to mask something out of an element, but not cut out blur or box-shadow or a pseudo outside the element's border box?

Well, subtract whatever you want masked out from a fully opaque layer with `mask-clip` set to `no-clip`!

mask:
conic-gradient(red 0 0) no-clip subtract,
var(--masked-area)

@codepen demo: https://codepen.io/thebabydino/pen/MYggKre

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

#tinyCSStip

Ever want to mask something out of an element, but not cut out blur or box-shadow or a pseudo outside the element's border box?

Well, subtract whatever you want masked out from a fully opaque layer with `mask-clip` set to `no-clip`!

mask:
conic-gradient(red 0 0) no-clip subtract,
var(--masked-area)

@codepen demo: https://codepen.io/thebabydino/pen/MYggKre

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

Someone hearted a Pen I made over a year ago, a no library, minimal JS version of another I found on @codepen.

At the time, it didn't work in Firefox as it was transitioning custom properties and support for :has() there was spotty.

Now it's cross-browser codepen.io/thebabydino/pen/gOqYdJd

#CSS #cssTransition #mask #cssMask #revealEffect #textEffects #textEffect #code #coding #frontend #webDevelopment #web #dev #webDev

Someone hearted a Pen I made over a year ago, a no library, minimal JS version of another I found on @codepen.

At the time, it didn't work in Firefox as it was transitioning custom properties and support for :has() there was spotty.

Now it's cross-browser codepen.io/thebabydino/pen/gOqYdJd

#CSS #cssTransition #mask #cssMask #revealEffect #textEffects #textEffect #code #coding #frontend #webDevelopment #web #dev #webDev

I made this over 6 years ago: hand-drawn-like image border with #SVG filters codepen.io/thebabydino/pen/PyXoMW

I had no idea what I was doing back then, so I'm surprised I don't hate the code. Though some things I surely wouldn't do the same way.

#filter #svgFilter #flexbox #handdrawn #code #coding #frontend #CSS #cssMask #web #dev #webDevelopment #webDev

I made this over 6 years ago: hand-drawn-like image border with #SVG filters codepen.io/thebabydino/pen/PyXoMW

I had no idea what I was doing back then, so I'm surprised I don't hate the code. Though some things I surely wouldn't do the same way.

#filter #svgFilter #flexbox #handdrawn #code #coding #frontend #CSS #cssMask #web #dev #webDevelopment #webDev

Something I made over half a decade ago on @codepen: single element pure #CSS border patterns!

Cover method (only allows opaque background + hacky transparency emulations) https://codepen.io/thebabydino/pen/LaxmKO

Masking method (allows transparency) https://codepen.io/thebabydino/pen/pYrQYN

Patterns from the CSS3 Pattern gallery by @leaverou: https://projects.verou.me/css3patterns/
(with gradient code made a bit more modern)

#gradient #cssGradient #mask #cssMask #pattern #cssPattern #code #coding #web #dev #webDevelopment #frontend #webDev

Something I made over half a decade ago on @codepen: single element pure #CSS border patterns!

Cover method (only allows opaque background + hacky transparency emulations) https://codepen.io/thebabydino/pen/LaxmKO

Masking method (allows transparency) https://codepen.io/thebabydino/pen/pYrQYN

Patterns from the CSS3 Pattern gallery by @leaverou: https://projects.verou.me/css3patterns/
(with gradient code made a bit more modern)

#gradient #cssGradient #mask #cssMask #pattern #cssPattern #code #coding #web #dev #webDevelopment #frontend #webDev

Over a decade ago, I made this single div tooltip on @codepen, but things have changed for the better on the web since, so here's an improved 2024 version https://codepen.io/thebabydino/pen/ALREmx

Instead of aligning gradients of div & its pseudos, it's using #CSS #masking and a simple #SVG #filter.

#cssGradient #svgFilter #cssMask #code #tooltip #roundedCorners #coding #frontend #web #webDevelopment #dev #webDev

Over a decade ago, I made this single div tooltip on @codepen, but things have changed for the better on the web since, so here's an improved 2024 version https://codepen.io/thebabydino/pen/ALREmx

Instead of aligning gradients of div & its pseudos, it's using #CSS #masking and a simple #SVG #filter.

#cssGradient #svgFilter #cssMask #code #tooltip #roundedCorners #coding #frontend #web #webDevelopment #dev #webDev

Simplest gradient border buttons (with border-radius) https://codepen.io/thebabydino/pen/vYoJqBK

Multiple cases, each just a few lines of code:
✨ solid background
✨ (semi)transparent background
✨ (semi)transparent background for input[type=button] (so no pseudos allowed)

#CSS #cssGradient #cssMask #masking #code #coding #frontend #web #dev #webDev #webDevlopment

Simplest gradient border buttons (with border-radius) https://codepen.io/thebabydino/pen/vYoJqBK

Multiple cases, each just a few lines of code:
✨ solid background
✨ (semi)transparent background
✨ (semi)transparent background for input[type=button] (so no pseudos allowed)

#CSS #cssGradient #cssMask #masking #code #coding #frontend #web #dev #webDev #webDevlopment

Find it mind-boggling anyone could find something so simple mind-boggling (I'm also bored of this kind of thing since I've coded it way too many times over the past 7 years), but here's a faded progress ring in under 20 heavily commented #CSS declarations on @codepen:
https://codepen.io/thebabydino/pen/vYomEaO?editors=0100

#gridLayout #cssGrid #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

Find it mind-boggling anyone could find something so simple mind-boggling (I'm also bored of this kind of thing since I've coded it way too many times over the past 7 years), but here's a faded progress ring in under 20 heavily commented #CSS declarations on @codepen:
https://codepen.io/thebabydino/pen/vYomEaO?editors=0100

#gridLayout #cssGrid #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment