user984621 user984621 - 19 days ago 6
CSS Question

HTML+CSS: How to add shadow (as image) to image?

I ama trying to add to each image from my gallery a shadow. I know I can add the CSS shadow to each element, but the shadow that I am trying to add under my photos is taken from PSD layout and has a different shape than the CSS shadow.

Here's the sample, what I am trying to achieve:
enter image description here

And what I did until now:

<div style="padding-left: 15px; position:absolute;">
<img src="avatar.png" alt="" />
<img src="shadow.png" alt="" style="margin: 190px 0 0 -191px; width: 187px;" />
</div>


It's a terrible solution and even more, it's working for me only in Chrome. Could you guys help me please, how to do it more efficiently and workable in all browsers?

Answer

You may create a transparent PNG for the shadow effect, then put it as background-image in a div. Then, you could add your image into that div, positionning with css.

This solution would work with every browsers, even with IE6 if you get it to work with transparent pngs.

Hope this helps.