lan wangji ⊹ ࣪ ˖ · 1mo
hi! i was wondering if you had any idea on how to add a border/drop shadow around an image that has a mask over it (for example, if i have a heart mask over an image, is there any way that i could make a border/shadow appear around directly around the heart)? i’ve seen codes that allow you to add shadows/borders around an image but never around the outline of a masked image… i really hope i’m making sense with what i’m asking 😭
hii it makes sense dw! i've tried using both but only drop shadow works for me, border doesn't really work it just shows up as a square.. btw i'll use this heart mask as an example!
so once you've copy pasted the codes (excluding the <img src= thing bc i find it easier to use carrd's image element instead) you just have to replace the .heart id with your image's element ID & then add .frame after that, so it'll be something like this: #image01.frame {
now for the drop shadow, you just have to use this ID which is #image01.image { (just replace the image01 with your image's element ID) and then add your drop shadow code, so the full code would be something like this:
<style>
image01 .frame {
width: 7em;
height: 7em;
-webkit-mask-image: url(https://i.imgur.com/bIX4M8u.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
image01.image {
filter: drop-shadow(2px 4px 6px black);
}
</style>
i'll attach a screenshot below just in case the code doesn't show up correctly on retrospring, but yeah i hope this makes sense! 😅 feel free to dm me tho if you need more help with it!
