Menu
I have an box of content and need to give shadow for that. But I want to give shadow for the bottom of the box only. I used this css box-shadow: 0 3px 5px #000000;
If i give this code it shows left,right and bottom. I need bottom only
Can any one suggest to solve this one. Thanks a lot
400
Use the box-shadow Property to Set the Bottom Box Shadow in CSS. We can use the box-shadow property to set the shadow only at the bottom of the box. The box-shadow property sets the shadow of the selected element.
To apply a shadow effect only on one side of an element set the blur value to a positive number and set the spread value to the same size but with a negative sign. Depending on which side you want the shadow on, set the offset value as follows: Top shadow: offset-x: 0 and offset-y: -5px.
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.
box-shadow: h-shadow v-shadow blur spread color inset; In your example you're offsetting shadow by 10px vertically and horizontally. Like in other comments set first two values to 0px in order to have even shadow on all sides.
You can do the following after adding class one-edge-shadow or use as you like.
.one-edge-shadow {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Source
171
You have to specify negative spread in the box shadow to remove side shadow
-webkit-box-shadow: 0 10px 10px -10px #000000;
-moz-box-shadow: 0 10px 10px -10px #000000;
box-shadow: 0 10px 10px -10px #000000;
Check out http://dabblet.com/gist/9532817 and try changing properties and know how it behaves
14
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
