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.