Best way to do this kind of drop shadow?

Question

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): enter image description 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!

You need to use CSS3 Transforms to achieve that type of shadow, but its messy and poorly supported! — Zuul, May 10 '12 at 20:09

score 12 · Accepted Answer · answered May 10 '12 at 20:14

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!

Woah, excellent...I did NOT know you could do those with CSS! Much more elegant than my solution...thanks (and thanks for the link to it as well!) — Chris Cummings, May 10 '12 at 20:20
Don't you hate it when you submit a simple answer and as you submit the page reloads with something as good as this ;) sweet link too mate, +1 — Rick Donohoe, May 10 '12 at 20:24

score 0 · Answer 2 · edited May 10 '12 at 21:18

0

You can use box-shadow:

.rightimgdropshadow { 
    box-shadow: 0px 2px 3px rgba(0,0,0,.3);
}

This will create a similar effect, but it won't look just the same.

Some info on that.

edited May 10 '12 at 21:18

Maehler

6,111
1
41
46

answered May 10 '12 at 20:12

zakutnya

1
5

score 0 · Answer 3 · answered May 10 '12 at 20:21

Something along the lines of

border: 1px solid #333;
border-bottom: none;
padding: 10px 10px 20px;
background: url('insert_image') no-repeat;
background-position: left bottom;

The extra padding at the bottom allows the background to sit in the correct place.

Does that help?

Best way to do this kind of drop shadow?

3 Answers3