Matt Berseth

While waiting for VS 2008 Web Developer to download, I took some time to browse through the Visual Studio Express site.  I am not usually a fan of sites that use a black background, but I thought it actually looked pretty good here.  The contrast between the white text and black background makes it hard to look at for too long, however in general the site gives off that sleek and cool vibe that I am certain the designers were shooting for.  One visual item in particular that caught my eye was the nice reflection effect all of the images on the page had.  Check it out in the screen shot below.   

Live Demo | Download (IE6, IE7 and FF)

I have briefly looked into this before so I was curious how this page had implemented it.  I opened up the IE Developer Toolbar and took a quick look.  For this page, the developers created a single image that contains both the image and the reflection.  You can clearly see that below (or here).

And really, for most scenarios that is probably the best way to accomplish this.  No cross browser issues, no JavaScript and no clever CSS tricks are required.  However, if your application needs something a little more flexible there are a couple of other options that can be used to dynamically add this reflection to any image.  I am no expert on this topic, but I did do a little research that I thought I would share.

Option #1 Browser Specific Client Side Solution

Internet Explorer

To add image reflection for IE, you can leverage two of IE's DirectX Image Transforms: Alpha and FlipV.  FlipV is pretty simple, it allows the content of the object to be flipped across the vertical axis.  The Alpha filter is only slightly more complex, it allows you to adjust the opacity of the object by setting a few property values.  Here is the table that lists these attributes:

So to add a reflection to an image in IE, we can apply a filter to the img object and specify that we want the image flipped across the y-axis and set the Alpha attribute to set the opacity to how dark or light we want the reflection to appear.  The MSDN site has an interactive demo page that you can use to play around with the different Alpha values and see how they effect the image.  I recommend checking this out.

And here is the HTML snippet for the filter used on the image above:

<DIV 
     ID="oFilterDIV" 
     STYLE="position:absolute; top:50px; left:10px; width:240px; 
     height:160px; padding:10px; font:bold 13pt verdana; background:green;
     filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=10, Style=1, 
     StartX=0,  FinishX=40, StartY=30, FinishY=100)">
     This is the DIV object content.
</DIV>

FireFox, Opera and Safari

These browsers all support the canvas element which allows for scriptable rendering of bitmap images.  There is a good tutorial on the mozilla site full of interactive demos that you can walk through to learn more about the canvas element.  I honestly have not worked with the canvas element before, but I think there are some similarities to IE's DirectX Transforms.

The combination of these 2 solutions mentioned here is the approach used here.  I recommend downloading the JavaScript source and looking through it.  The add function that is responsible for adding the reflection has an if/else structure that aligns to the 2 approaches above. 

if (IE) {

... use DirectX Transform to build the reflection

}

else {

... use the canvas element to build the reflection

}

Option #2 Cross Browser Client Side Solution

Another client side JavaScript solution is to manipulate the DOM by building a series of 1 pixel DIV's that use a negative margin value to build the a structure of DIV elements that reconstruct the image one row at a time.  The JavaScript for this approach can be seen here.  This approach is nice because it is cross platform, but it does add quite a bit of bloat to the DOM.  If you look at the Reflector demo page with the IE Developer Toolbar, you will see what I mean.  The IMG tag for the top image is followed 66 DIV tags which are dynamically created and added to the DOM via JavaScript.

Option #3 Cross Browser Server Side Solution

And of course you could always off-load this work from the client and have the server do the work of serving up images with the reflection applied to them on the fly as the images are requested.  I didn't see any .Net examples doing this, but this is the approach taken by Easy PHP Reflections.

Conclusion

While working on this post, I combined the JavaScript source from approach #1 and #2 into an AjaxControlToolkit Extender Control (ImageReflectionControlExtender) so I could get a better feel for how the different client side techniques work.  I tested the extender in IE6, IE7 and FF and didn't run into any issues, however it didn't work so well in Opera.  I still need to look into why that is.  It's not production ready, but it helped me learn a little bit more about this topic. 

That's it.  Enjoy!