22 Replies
why don't you use
clip-path: circle(100px) on the image?I need it to be repeatable
define "repeatable"
like background-repeat or mask-repeat
also I found out that the problem is the mask-image source but I dont understand why, I get the source from here https://www.w3schools.com/css/css3_masking.asp
the image is back and white
try making it black and transparent, like the example
I'm using this image
I copied the url from the css, so it should work
so?
So if it works there, why doesnt it work on mine
i just told you
compare that
I tried with this image and it works but I dont get why, this image is transparent as well https://www.w3schools.com/css/w3logo.png
wait, you are using the same image
Ohh
you can make it into a base64 string
It's fine dont worry I dont need that specific image, I just used it only as an example to test it
Thanks tho
you're welcome
FYI, you can use a black and white
mask-image in a CSS mask if you change the mask-mode to luminance https://developer.mozilla.org/en-US/docs/Web/CSS/mask-modeMDN Web Docs
mask-mode - CSS: Cascading Style Sheets | MDN
The mask-mode CSS property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
You may get some insights from this KPow video if you haven’t seen it yet
https://youtu.be/FCuNtCq3nRg?si=3dfMWxI2hhFwNscV
Kevin Powell
YouTube
mask-image lets you do some really cool stuff
Add some creativity to your designs with mask-image!
🔗 Links
✅ Browser support: https://caniuse.com/?search=mask-image
⌚ Timestamps
00:00 - Introduction
00:30 - Setting things up to fade out the image
00:58 - Fading it out
02:30 - Fixing the layout
03:15 - Improving the fade out
03:52 - Masking with shapes
#css
--
Come hang out with other d...