I have an element that has inset box shadows, but I want the shadow on only the top.
Is there no way to set only the top shadow? Do I have to resort to creating additional elements to overlay the side shadows?
Problem courtesy of: Mark
This is technically the same answer as @ChrisJ, with a few more details on how to make
box-shadow do your bidding:
for reference the * items are optional:
box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;
<spread-radius> needs to be negative
<blur-radius> (so that none of the other blurred sides show up), and then you need to bump the
<offset-y> down by the same amount:
box-shadow: inset 0 20px 20px -20px #000000;
It will give you a single gradient band across the top of the element.
Here's a little hack that I did.
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div> right below the element that I want to create the one-side box shadow (in this case I want a one-sided inset shadow for
id="element" coming from the bottom)
Then I created a regular box shadow using a negative vertical offset to push the shadow upwards to one-side.
box-shadow: 0 -8px 20px 2px #DEDEE3;
Discussion courtesy of: user1187135
Here is my example please try once
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
box-shadow offsets the shadow by a given amount in each direction. So you need x-offset to be 0, and y-offset to be something negative.
Additionally, you have to play with the blur-radius and spread-radius so that the shadow is not visible on the left and right sides.
box-shadow: #777 0px -10px 5px -2px;
See the description on the Mozilla Developer Network.
Discussion courtesy of: ChrisJ
Maybe try using box-shadow:
box-shadow: h-shadow v-shadow blur spread color inset;
overflow-x: hidden; and
box-shadow: 0px 10px 16px -10px #000;
box-shadow: 0 2px 0px 0px red inset;
The First parameter and second parameters specifies the offset of shadow to x-direction and y-direction respectively.
Third parameter specifies the blur distance.
Finally, the fourth parameter specifies the spread distance.
Specifying only the second parameter with the offset you want gives the top shadow without side shadows.
Demo can be found here: http://jsfiddle.net/rEdBy/
A very nice tutorial on CSS3 Box shadows - http://www.css3.info/preview/box-shadow/
Discussion courtesy of: Shab
This recipe can be found in it's original form on Stack Over Flow.