Subscribe to the Blog
Cow's Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.
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'll degrade and your visitors won't notice a thing. Best of all, it's under 5KB.
This is so simple its almost impossible to screw up. Step 1) upload reflection.js to your file system. 2) Include in your HTML header using <script></script> tags, 3) add class="reflect" to any image you want to have a reflection.
Here's an example:
There is going to be a small performance hit as the script processes the image, so I wouldn't recommend going crazy with this feature inside a web app. However, for marquee images and static pages, this is a really slick "Web 2.0" addition to any website. For those developing for a large IE6 installed base, I'd caution against extensive use of this script. I've not tested it, but my guess is with Safari you'd never notice a performance impact. With Firefox it should be fairly minimal and still worth the trade-off.
And yes, I'm also using this on this site.
| 
| 
| 
| 
| 
| 
