5

This is a super simple issue that I can't figure out.

I want to have a drop shadow go all the way across the bottom of a div. As it is, it covers most of the bottom:

enter image description here

And here is the code:

box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)

I need the shadow to go all the way across on both sides.

Thanks

EDIT: Am I going about this wrong? Should I be using some other CSS property?

Lizza
  • 2,769
  • 5
  • 39
  • 72

4 Answers4

2

There is a solution for that using an extra div, bigger than the original, positioned absolutely. See a working example here: http://jsfiddle.net/martinschaer/MHs5R/

<div class="container">
    <div class="content"></div>
    <div class="shadow"></div>
</div>

And de CSS:

.container{
    position: relative;
    background-color: #f0f0f0;
    padding: 20px;
}

.content{
    height: 200px;
    width: 200px;
    background-color: #fff;
}

.shadow{
    -webkit-box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    position: absolute;
    top: 20px; /* .container top padding */
    left: 13.5px; /* 20 - (15/2) = .container left padding - (shadow spread / 2) */
    width: 215px; /* .content width + shadow spread */
    height: 200px;
}​
Martin Schaer
  • 3,986
  • 1
  • 23
  • 28
2

To avoid the top shadow, add vertical offset and adjust your other parameters accordingly. In addition, set the spread distance to be 0 or greater and you'll cover your horizontal border.

Start with this:

box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49)

If you're not getting the full horizontal border covered, increase the 4th value slightly until it looks good. Adjust your vertical offset accordingly as well if needed.

It would be helpful to see your html / css for the actual box as well.

timshutes
  • 2,259
  • 3
  • 22
  • 28
  • 1
    Important to note - when you increase your blur distance, you will in effect decrease the appearance of the spread distance (it will blur out the edges and appear smaller). If you want more blur, and you want to cover the same distance, you'll need to increase the spread. Use the JS fiddle from the previous answer and play around until you have it. – timshutes Jun 13 '12 at 04:24
  • I finally was able to get it after I started with your numbers. I eventually settled on 0px 10px 20px -5px rgba(0,0,0,.25) and it is looking pretty near perfect. Thanks! – Lizza Jun 13 '12 at 05:42
1

The box-shadow parameters are in the sequence as below:
horizontal offset, vertical offset, blur distance, spread distance of the shadow, a color value

I think what you need is this box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.49)

Here is the fiddle - http://jsfiddle.net/ashwyn/Cbqej/1/

Ashwin
  • 12,081
  • 22
  • 83
  • 117
  • That gives me what I want on the bottom, but it also adds shadow to the top of the div (which is 100px tall). I only need this shadow on the bottom – Lizza Jun 13 '12 at 04:05
1

The result is:

enter image description here

Demo on dabblet.com

CSS:

div {
    background-color: #FFF;
    border: 1px solid #888;
    width: 100px;
    height: 100px;
    box-shadow: 0px 10px 5px -2px #888 ;
}
Community
  • 1
  • 1
Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114