Menu
I want to have box-shadow on three sides of a div (except top side). How could I do that?
236
The trick is to give the element with box-shadow and its previous sibling positioning, then give the previous sibling a background color and set it to have a higher z-index so that it's stacked on top of the element with box-shadow , in effect covering its top shadow.
You can comma separate box-shadow any many times as you like.
Simply apply the following CSS to the element in question: box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */ clip-path: inset(Apx Bpx Cpx Dpx); Where: Apx sets the shadow visibility for the top edge.
Here's a JS Fiddle for you, it only uses one single div to work.
#shadowBox { background-color: #ddd; margin: 0px auto; padding: 10px; width: 220px; box-shadow: 0px 8px 10px gray, -10px 8px 15px gray, 10px 8px 15px gray; } You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.
176
If you are looking for something like Google material design shadows:
.shadow1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .shadow2 { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .shadow3 { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .shadow4 { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .shadow5 { box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } Source: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
