Reflecting images with Javascript

Recently I had to “beautify” a menu with some reflection. Silverlight for various reasons failed to be a viable solution so I had to go all out custom. As I’m a serial cut and paster I decided to use a very handy library I stumbled across in the past. Reflection. To quote the author, it is:

  • Fun and easy to implement! Just add class=”reflect” to your images
  • Automatically blends into background colours or images
  • It’s easy to vary the reflection height and opacity
  • Can respond to user actions through Javascript
  • Degrades in older browsers; they won’t notice a thing!
  • It’s smaller in size than most images; under 5KB!

This is extremely easy to use. It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it degrades nicely.

Well worth a visit. You can even demo it out first here: