CSS3 Question: How to Have No Box Shadow on The Top of a Div

CSS3 Question: how to have no box shadow on the top of a div?

If you can nest two divs then you should be able to use a combination of margins and overflow:hidden to 'chop off' the top shadow without losing the required effect on the other edges.

For example this mark-up:

<div class="outer">
    <div class="inner">hello</div>
</div>

And this CSS

.outer {
    margin-top: 200px;
    overflow: hidden;   
}

.inner {
    width:200px;
    height: 200px;
    margin: 0 200px 200px 200px;
    -moz-box-shadow: 0px 5px 200px #00C0FF;
    -webkit-box-shadow: 0px 5px 200px #00C0FF;
    box-shadow: 0px 5px 200px #00C0FF;
}

Gives this result - http://jsfiddle.net/ajcw/SLTE7/2/

Set CSS3 box-shadow not to be on top of div

You cannot do this with ONE div.

EDIT

box-shadow does not allow right and left shadows at the same time.

There is a trick, though...read on.

The rule takes four values:

1. defines the horizontal offset of the shadow. + value for a right shadow and - value for a left shadow.
2. defines the vertical offset. + value for a bottom shadow and - value for a top shadow.
3. defines the blur distance
4. defines the spread

That is all true. However, after some tests I found you can layer shadows.

All you need to do is separate the values with a comma.

So, for a left, right, and bottom shadow on one div, you can do this

box-shadow: -5px 5px 3px black, 5px 5px 3px black;

Example: http://jsfiddle.net/jasongennaro/HWCzJ/1/

Prevent box shadow from showing on a specific side

As I stated in a related question of mine the solution to this problem is either very obscure or is not possible with the current technology. Its really too bad there is no way of accomplishing this as it is a common theme in web design.

I resorted to using a png shadow as it seems to be the only sane solution.

Thanks for all of your suggestions.

CSS Box Shadow - Top and Bottom Only

As Kristian has pointed out, good control over z-values will often solve your problems.

If that does not work you can take a look at CSS Box Shadow Bottom Only on using overflow hidden to hide excess shadow.

I would also have in mind that the box-shadow property can accept a comma-separated list of shadows like this:

box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;

This will give you some control over the "amount" of shadow in each direction.

Have a look at http://www.css3.info/preview/box-shadow/ for more information about box-shadow.

Hope this was what you were looking for!

How to prevent a div element to be affected by the box-shadow of another div element?

The comment made by @jcaron solve my problem:

One option would be to use the first option, then add another blue box at the same location as the first one, but without the shadow, and a higher z-index.

Thank you all for your support.

Remove right side of box shadow

I think you have 2 options:

1) Set your shadow's horizontal alignment to the left (negative values).

box-shadow: -30px 0px 10px 10px #888888;

Although this way you won't have the same shadow size in the top and bottom.

2) Use a div inside a div and apply shadow to each one.

.div1
{
    box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
    box-shadow: -30px -10px 20px 10px #888888;
}

Then you'll have to ajust the size for the one you want.

Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/

CSS3 Box Shadow on Top, Left, and Right Only

It's better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.

#servicesContainer {
  /*your css*/
  position: relative;
}

and it's fixed! like magic!

---

Related Topics