How to: irregular box shadow

Hi all

I have a rough demo here - http://www.ttmt.org.uk/shadow/

I’ve seen this sort of thing loads where you hava a shadow longer at one end
to make it look like the container is peeling up.

What’s the best way to do this.

I’m certain the shadow is an image, but whats the bext way to add it.

In my example I added the image to a span and then positioned it absolutely outside the container.


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">


  <style type="text/css">

    *{
      margin:0;
      padding:0;
    }
    html,body{
      height:100%;
      background:#ccc;
    }
    #wrap{
      background:#fff;
      width:900px;
      margin:0 auto;
      overflow:auto;
      min-height:100%;
    }
    #box{
      width:300px;
      height:400px;
      border:1px solid #ccc;
      border-radius:5px;
      margin:50px;
      position:relative;
      z-index:2;
    }

    span{
      display:inline-block;
      width:300px;
      height:50px;
      background:url(shadow-right.png) 0 0 no-repeat;
      position:absolute;
      bottom:-51px;
      left:0;
      z-index:1;
    }
  </style>


  <title>Title of the document</title>
  </head>

<body>

  <div id="wrap">

    <div id="box">

      <span></span>
    </div><!-- #box -->

  </div>

</body>

</html>

SitePoint wrote about this technique in their HTML5 book, which I don’t have handy right now. It involves creating an :after pseudo-element and applying box-shadow and transform:rotate to it. I’m missing some details, I know, but the fiddle at http://jsfiddle.net/nosnetrom/eRghW/ should get you started.

For subtle shadows, I use this method.


 
         .lifted {
            -moz-border-radius:4px;
                 border-radius:4px;
            position:relative;
            float:left;
            width:40%;
            padding:1em;
            margin:2em 10px 4em;
            background:#ccc;
        }

         .lifted:after {
            content:"";
            position:absolute;
            z-index:-2;
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            max-height:100px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
                    
            right:10px;
            left:auto;
            -webkit-transform:rotate(3deg);
               -moz-transform:rotate(3deg);
                -ms-transform:rotate(3deg);
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }

 
 
        <div class="drop-shadow lifted">
             Lifted corners 
        </div>


You could also assume your pseudo element is merely an image holder, and use a generated CSS3 gradient. That is a powerful way to do it but a bit of a pain to calculate.

hope that helps