CODEWITHSUNDEEP
css
Andre Chenier
Andre Chenier

Reputation: 1186

only top box-shadow (same style with another div's box-shadow style but only top)

please refer to http://jsfiddle.net/3fTyt/806/

I need box 2 has the same box shadow style with box 1 but only top of box 2 must be shadowed.

I tried a lot but couldn't find a solution. Can you please help? regards.

Codes in jsfiddle

CSS

#box1 {
    background: #fff;
    box-shadow:  0 0 10px 1px rgba(0,0,0,.99);

    font: bold 18px/1.2em sans-serif;
    height: 100px;
    margin: 15px auto;
    padding: 75px 15px 25px;
    text-align: center;
    width: 200px; float:left; margin:50px;
}
#box2
{
    background: #fff;

    box-shadow: 0 0 10px 1px rgba(0,0,0,.1), 0  -1px 1px rgba(0,0,0,.99);

    font: bold 18px/1.2em sans-serif;
    height: 100px;
    margin: 15px auto;
    padding: 75px 15px 25px;
    text-align: center;
    width: 200px; float:left; margin:50px;
}

HTML

<div id="box1">box 1</div>
<div id="box2">box 2: only top shadow is required and should has same shadow style with box 1</div>

Upvotes: 0

Views: 667

Answers (1)

P&#233;ha
P&#233;ha

Reputation: 2933

You might try something like this :

#box2 {
  box-shadow: 0px -10px 10px -10px rgba(0,0,0,.99);
  ...
}

Why these settings ?

  • horizontal offset = 0px : no horizontal offset,
  • vertical offset = -10px : 10px to the top,
  • blur radius = 10px : just used the same value as #box1,
  • spread distance = -10px : as for spread distance, a positive value would expand the shadow, but a negative value make it "shrink" (see the box-shadow documentation here). As we're using a 10px blur radius, we need to use at least a -10px spread distance to avoid seeing any shadow on the left, right and bottom sides.

Which gives us a pretty cool result, I think. Pretty close from what you were looking for :

enter image description here

Upvotes: 3

Related Questions