Best way to do this kind of drop shadow?

css, drop-shadow

Solution

If you prefere to use CSS to create that type of shadows, you can use CSS3 as seen here!

CSS

/* Lifted corners */

.lifted {
    -moz-border-radius:4px; 
         border-radius:4px;
}

.lifted:before,
.lifted:after { 
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -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);
}

.lifted:after {
    right:10px; 
    left:auto;
    -webkit-transform:rotate(3deg);   
       -moz-transform:rotate(3deg);  
        -ms-transform:rotate(3deg);  
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}

Made a Fiddle!

Problem

I have a site that will have a column of images and divs (a mix of both) that will always be the same size. On all of these I want to add a certain kind of drop shadow (as seen here): I've worked with CSS drop shadows but I've never seen one like this in CSS. Can this be done in CSS? Assuming it cannot then I'm guessing I would use just a drop shadow slice as a graphic, possibly a background. If that is the only route to go, how do I apply this to every image or div? Right now what I'm doing is putting a div under each image or div: ``` <div class="rightimgdropshadow">&nbsp;</div> ``` ...and doing this in CSS: .rightimgdropshadow ``` { background-image: url(../images/site-structure/right-col-image-shadow.jpg); background-repeat: no-repeat; background-position: center top; width 100% height: 20px; } ``` Is there a better way to do this? Thanks!

Original source