Geek Answers Handbook

Best way to make this shadow?

I have a site that will have a column of images and divs (a combination of both) that will always be the same size.

In all of these cases, I want to add a specific shadow (as shown here): enter image description here

I worked with CSS drop shadows, but I have never seen such as this in CSS. Can this be done in CSS? Assuming this is not possible, I assume that I would use only a piece of the shadow as the graphics, possibly the background. If this is the only way, how to 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 does it 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!

+7
source share
3 answers

If you prefer to use CSS to create shadows, you can use CSS3 like 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 violin!

+11
source

You can use box-shadow :

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

This will create a similar effect, but will not look the same.

Some information about this.

0
source

Something along the lines

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

An optional addition below allows the background to sit in the right place.

Does it help?

0
source

More articles:


All Articles