A "continuous" box shadow on an element
I'm creating a pill shaped button from a design that has a box shadow like effect, however two key features of the shadow complicate matters, the shadow must visually connect to the element in a straight line, and the drop shadow also has a repeating background of it's own.
The first attached image shows the design, and the second shows where I'm up to with the implementation.
My current approach is simply creating an
inset: 0 element underneath the pill button, applying the appropriate border, and applying a repeating-linear-gradient to achieve the striped background effect. I've no doubt this is an issue that has been solved before, but I've struggled to find the answer.
Here's a pen to play with: https://codepen.io/mister_simon/pen/KKLOJwR
It's not the neatest... But it's a working prototype so yeah lol.
8 Replies
what you've got looks pretty good so far. I'm not sure what you mean by "the shadow must visually connect to the element in a straight line" are you talking about the solid line and dotted line behind the link?
Thanks! It's a little hard to describe, hopefully this helps
The higher up the main button gets, the more obvious it is that the shadow doesn't actually connect to the button top, like so:
So, ideally I'd want some way to fill the gap:
The only way I can think of is to use a bunch of box shadows... but that has limitations as well, because if it lifts more than it's own size, like in that last screenshot, it falls apart.
Anchor positioning would probably be able to solve this quite easily, tbh, but that isn't really a useable solution yet.
This is with the shadow, and it works with the lift of 1.25rem, but any more and it wouldn't work anymore https://codepen.io/kevinpowell/pen/qBGevjP (added the shadow all the way at the bottom).
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!
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 ✅ .
ah, very nice 👍
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 🤷 .
Or some other method possibly making use of a 3d transform with perspective to warp the lower section into the right shape.