eloism eloism - 2 months ago 7
CSS Question

Box-Shadow on 3 sides of a div (not on the right side)

I've seen this post and after multiples attempts to modify the code by the top answer I am still unable to convert it from box-shadow Left/Bottom/Right to Top/Left/Bottom.

This is the Fiddle :



#shadowBox {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 0 gray,
-10px 8px 0 gray, 10px 8px 0 gray;
}

<br/><br/>
<div id="shadowBox">Test</div>





How can I do that ? I don't understand how this works and manuals don't go further than the classic border-box...

Answer

HTML

<br/><br/>
<div id="shadowBox">Test</div>

CSS: Top/Left/Bottom

  #shadowBox {
      background-color: #ddd;
      margin: 0px auto;
      padding: 10px;
      width: 220px;
      box-shadow: -10px -10px 10px gray, 
          -10px 0px 10px gray, -10px 10px 10px gray;
  }