Cross-browser alternative method of performing text reflection + gradient (like -webkit-box-reflect)

Question

I'd like to achieve the effect of -webkit-box-reflect in other browsers also (ie mirrored text with a gradient applied). Eg.

.textreflection {
    -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4))); 
 }

I'm open to server side (PHP, ie. happy to generate images server side to replace text) and client side (Javascript - jQuery) solutions.

I've tried a couple of jQuery plugins but they either didn't look right or didn't work properly with all font sizes ( FontEffect , and jquery.textreflection).

Any ideas how I can achieve this effect in an elegant cross-browser way, please?

PS. I'd also be interested if anyone knows of any HTML5/Canvas solutions that I can keep in mind for future reference (I can't use it in this instance but would like to have a look anyway)

Answer 1

Here's a few solutions that work with images, but I haven't tested with text:

• Reflection.js
• CSS3 flip reflection
• Reflex.js