SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Code:
    <!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>

  2. #2
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    117
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    For subtle shadows, I use this method.

    Code:
     
             .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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •