1

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?

heron
  • 3,611
  • 25
  • 80
  • 148
  • 1
    I don't think that's possible, maybe because there's no such shadow in real world. :) – kazinix Feb 16 '12 at 07:47
  • 2
    @domanokz: care to explain why it matters? What does the "real world" have to do with CSS? – mingos Feb 16 '12 at 07:52
  • @mingos Are you asking what does the "real world" have to do with computers? We make real things virtual (document spreadsheet etc), so are the shadows. – kazinix Feb 16 '12 at 08:32
  • 1
    Such a shadow is easily possible in the real or virtual world with multiple light sources. – Philip Walton Feb 16 '12 at 08:35
  • @domanokz No, I am not asking that. I'm asking what the real world, particularly with its physics, has to do with design decisions and/or artistic values expressed via an artificially created metalanguage such as CSS. The fact that the shadows depend on the light source in the real world does not mean you can't paint them differently. Ask Salvador Dalí for an opinion :P – mingos Feb 16 '12 at 10:11
  • @mingos I actually agree :) Why bring the limitations of the real world here but that's how I see it, I mean WHY there is no `box-shadow-bottom`. Well I think you figured it out how to remove shadows from top and bottom. Bookmared! – kazinix Feb 16 '12 at 10:22

4 Answers4

1

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.

mingos
  • 23,778
  • 12
  • 70
  • 107
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.

Philip Walton
  • 29,693
  • 16
  • 60
  • 84
0

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:

Community
  • 1
  • 1
rdougan
  • 7,217
  • 2
  • 34
  • 63
0

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/

sandeep
  • 91,313
  • 23
  • 137
  • 155