Web 2.0 Reflection using HTML and CSS only

You’re most probably familiar with the Web 2.0 reflection technique.  This technique is used to make products appear as if they’re on a shiny surface.  Apple most probably have it in use in their current campaign on the Apple website.

I was thinking about this technique as it can be quite fiddly to put together.  Normally you would use Photoshop or The Gimp or Inkscape to apply a gradient to an existing image, and then save that image as a seperate one, making sure you keep your original should you need it.

I then realised that by using a combination of CSS background images, background-position and opacity you could reproduce this effect purely with HTML and CSS.  I’m yet to wrap up the finer points but here’s the idea.

1. Include your image on the page with an <img …/> tag as per usual.
2. Underneath the image, include a number of 1px high empty <div> tags.
3. On each div tag, set the background-image to be the same as the image referenced in step 1, set the background-position such that the 1px high div is displaying the correct row from the image, and set the opacity such that it fades out a little more on each subsequent div.

This image illustrates the effect up close:

My concerns at this point are:

1. What effect will this technique have on older browsers?
2. How will this break across browsers? (I’m assuming it won’t be perfect)
3. The extra HTML for one image is maybe acceptable, but many images on a page would significant slow down load time for the sake of some shine
4. What effect – if any – will this have on SEO?

I’m considering writing a jQuery plugin that you could use to apply this technique.  You can see the technique in actual use on this page.  View the source code to see how it’s done.