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
This question is related to
css
-webkit-box-shadow: 0 3px 5px -3px #000;
-moz-box-shadow: 0 3px 5px -3px #000;
box-shadow: 0 3px 5px -3px #000;
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
Try using online generator css3.me
Change the value and get the code, pretty simple.
Specify negative value to spread value. This works for me:
box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);
Source: Stackoverflow.com