CODEWITHSUNDEEP
cssdrop-shadow
Chris Cummings
Chris Cummings

Reputation: 1548

Best way to do this kind of drop shadow?

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!

Upvotes: 8

Views: 3158

Answers (3)

zakutnya
zakutnya

Reputation: 11

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.

Upvotes: 0

Rick Donohoe
Rick Donohoe

Reputation: 7271

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?

Upvotes: 0

Zuul
Zuul

Reputation: 16269

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!

Upvotes: 12

Related Questions