Possible to create a css shadow on transparent background PNG image?

Question

Anyone know if its possible to yet create a css based drop shadow on transparent background PNG image?

Perhaps with CSS3,jquery or lastly server side?

Example after effect of what I am trying to acheive :

Pretty sure if it is possible it wouldn't be cross browser but willing to apply if it degrades well?

Feel free to add you input , open techniques discussion ..

Answer 1

YES! It's possible to do shadows on a transparent .png in CSS3! I needed this in one project that was displaying like junk in IE10. Instead of using box-shadow, use filter: drop-shadow(). The syntax is pretty much the same. Here's the article: link

The final solution is this (in case the link breaks):

.filter-drop-shadow {
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}