how to achieve this css3 shadow effect? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 4 years ago.

Improve this question

I am trying to see if its possible to achieve this kind of shadow usi开发者_JAVA技巧ng 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/

---

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.

---

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>