how to achieve this css3 shadow effect? [closed]

Question

I am trying to see if its possible to achieve this kind of shadow using pure css3:

I quickly mocked this up in photoshop. I am looking for that curved shadow effect. I know its possible to get straigt shadow effects. I tried to look on google I dont even know what to call that curved shadow. I couldn't find anywhere that says its not possible. Couldnt find anywhere that says it IS possible either.

if css3 isn't happening, I am willing to use jQuery.

any help, much appreciated. thanks.

edit: The closest I've gotten to achieve any sort of shadow just with css3 is this: http://jsfiddle.net/tVt4w/

Answer 1

At first I didn't think it was possible. Then I found this page that shows some nice examples in pure css.

Nifty.

See the demo page for an idea of what can be achieved.

Answer 2

HTML and CSS only

The shadow automatically adapts to the width of the image.

Using a PNG image, this can be done:

(not exhaustively tested for compatibility but it works in the latest FF, Safari and Chrome)

<style type="text/css" media="all">
.shadow {
    position:relative;
    width:auto;
    padding:0;
    margin:0;
}
.shadow:before,
.shadow:after {
    content:"";
    position:absolute; 
    z-index:-1;
}
.arch01:after {
    position:absolute;
    padding:0; margin:0;
    height:34px;
    width:100%;
    bottom:-30px;
    left:0px; right:0px;
    background-image: url('arch_01.png');
    background-size:100% 100%;
    background-position:left top;
}
</style>


<span class="shadow arch01">
    <img src="photo.jpg" width="500px" height="250px">
</span>