A while ago, I found a really nice javascript which creates reflections of images. At the time, I was interested in using it to create dynamically generated search engine friendly CSS based menus, but this code only accomodates reflections of images. Now I've found a jquery based tool by Dan Martin which supports visual reflection effects in text, images or any DOM element. If you are interested in seeing how it works, there is a demo of the jquery reflection effect here. As expected with jQuery, the code is cross browser compatible, and supports graceful degredation for older browsers. You can also vary things like the direction of the reflection (horizontal or vertical), the start and end opacity of the reflected image, and the offset of the reflection.

Here's the science bit...

The script works by creating 1 pixel high or 1 pixel wide (depending on the direction of the reflection) copies of the DOM object, so if you have an object that is 30 pixels high, the script will create 30 versions of that dom object, but only display a thin slice of the object which when put together with all the slices, creates a copy of the original dom object. these copies are selectively created with different levels of opacity, to give the effect of a reflection. All very clever stuff really.

When should we use this reflection script?

Dan mentions on his website that the reflection script should not be used in all cases. Since you have to create 31 copies of a 30 pixel high Dom object, the processing load on the browser becomes and issue. For smalled reflections, this is fine, but if you have a 300 px high image and want to put a vertical reflection effect on it, then this will create 301 copies of the image in the DOM - it gets even more complicated when you have complex DOM objects, as the code clones the full DOM tree of the object, so if you have a complex html table, with a reflection on it (yes you can do that!) then each clone will be a copy of the entire DOM tree of the table, which could make things run slowly. In modern browsers with high performing javascript engines, its not so much of an issue, but for older browsers it could cause problems.

What about HTML5 based reflections?

HTML5 includes the new Canvas tag, which allows you to programmatically create images on the fly. the canvas tag is used in this image reflection demo by William Mallone. At the minute, the implimentation of the canvas tag is not standardised across all browsers, but this situation is improving with each browser release. It is expected that Internet Explorer 10 will have native, standards compliant support for the canvas element. Firefox and Chrome already have full standards support.

Can I make 3D reflections?

Interestingly, one of the suggestions for the next version of the HTML5 canvas tag (would this be html 5.1?) is to include 3D support. At present few people use 3D other than a few hardcore gamers or specialist engineering companies, but the emergence of 3D technology is not a million years away. Microsoft have included 3D sterioscopic options in build 7955 of Windows 8. I think it's just a matter of time before web designers may need to think about 3D in their UI design. It will be very interesting to see how UI will change once gesture control technology and 3D technology arrive on the scene in a big way - maybe in the form of a 3D tablet device?