CSS3 box shadow issue - html

Question

Using this css for shadows
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
How do I remove shadow from top and bottom sides of the div and leave only horizontal shadow? Is that possible?

Answer 1

There are two ways to do this, but it depends on if you're looking for a hard edge or a soft edge.
Method One:
The trick here would be to wrap your box in a container and apply overflow:hidden to the container. If you give your box right and left margin that's the same as the shadow distance, the shadow will only be visible on the sides; it will be clipped on the top and bottom.
Here's an example:
http://jsfiddle.net/2Luef/1/
Method Two:
Alternatively, depending on the effect you're looking for, you could do something with multiple box-shadows like this:
http://jsfiddle.net/2Luef/3/
It doesn't have the clipping look like above, but it's arguably a nicer look. It also only uses one DOM element.

Answer 2

Yes and no.
The box shadow cannot be places on one side of an element unless you just offset it and/or change the spread, which I suspect isn't quite what you're after.
You can however place the element inside a container with the overflow set on it. The overflow property affects the box shadow. Here's an example.

Answer 3

You can use minus values for the spread value (last px value) to make the shadow not spread out to the other sides. However, that will only allow you to add the shadow to one side; so you can add multiple shadows, separated by a comma.
box-shadow: 10px 0 10px -10px #000, -10px 0 10px -10px #000;
For more information, checkout these two links:
How can I add a box-shadow on one side of an element?
http://starikovs.com/2011/11/09/css3-one-side-shadow/

Answer 4

Write like this:
CSS:
.parent{
height:200px;
margin:40px;
overflow:hidden;
}
.child{
width:200px;
height:200px;
background-color:#e0ffff;
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
margin:0 20px;
}
HTML
<div class="parent">
<div class="child"></div>
</div>
check this http://jsfiddle.net/k9kVZ/2/