mister_simon
KPCKevin Powell - Community
•Created by mister_simon on 7/3/2024 in #front-end
A "continuous" box shadow on an element
Or some other method possibly making use of a 3d transform with perspective to warp the lower section into the right shape.
12 replies
KPCKevin Powell - Community
•Created by mister_simon on 7/3/2024 in #front-end
A "continuous" box shadow on an element
One idea I had but couldn't pull off with a quick test was to make the shadow box the same width as the upper, and make its height the size of the upper plus the lift amount. Then skewX it 45 degrees. You'd have to handle the border some other way though, and probably a whole host of other problems to do with not conforming to the pill shape properly 🤷 .
12 replies
KPCKevin Powell - Community
•Created by mister_simon on 7/3/2024 in #front-end
A "continuous" box shadow on an element
So here's roughly what I'm going with for now making use of some calcs to spread those shadows out - allowing for a reasonable looking effect if you did want to lift the button top far:
https://codepen.io/mister_simon/pen/PovMLBg
Marked as (mostly) solved ✅ .
12 replies
KPCKevin Powell - Community
•Created by mister_simon on 7/3/2024 in #front-end
A "continuous" box shadow on an element
Thanks for taking a peek at this Kevin :). I had considered just stacking a bunch of box shadows too, but figured it might not look that good in the end for the effort. With this many though, it's actually not that bad for my purposes, as in practice I won't be lifting it that high up. I'll play with that some more and maybe add it to my final solution.
I'd not heard of the anchor positioning yet. Could make for an interesting solution some day 🤔 .
Cheers!
12 replies
KPCKevin Powell - Community
•Created by mister_simon on 7/3/2024 in #front-end
A "continuous" box shadow on an element
12 replies
KPCKevin Powell - Community
•Created by mister_simon on 7/3/2024 in #front-end
A "continuous" box shadow on an element
12 replies
KPCKevin Powell - Community
•Created by mister_simon on 7/3/2024 in #front-end
A "continuous" box shadow on an element
12 replies