HTML/CSS: How does Google create this drop shadow over their maps?

Question: How does Google create the dropshadow next to the vertical scrollbar over the Google Map?

This is a scre开发者_JS百科enshot depicting exactly what I'm talking about.

This seems to be regardless of browser (IE, Firefox, Chrome) and platform (Windows, Mac, Linux).

It's actually a series of five razor-thin DIVs, each with decreasing opacity, stacked next to each other. You can see this for yourself by using Firebug and clicking on the shadow area.

IE 8: Use F12, select the arrow control, then click on the element you're interested in.

In this case, it's 5 divs overlapping, widths 1-5px, all with a style of "filter: alpha(opacity=x); opacity:0.x;", x going from 10 to 02

Chances are it's -webkit-box-shadow or -moz-box-shadow, depending on your browser.

EDIT I just checked the page, and it's a series of <div> aligned together. Look for <div id="ds-v"> in the page source (or in some kind of DOM inspector, as that would be easier). It's most likely some kind of hack they've put together to get a cool effect, but I don't know how easily reproducible this is.

There are 100% reliable techniques to get PNG transparency in IE, and if used in limited areas which will not bog down the browser. They could easily have used a small PNG that repeats vertically for this, but my guess is they used the DIVs to skip the use of an extra image. On Google Maps website this is a worthwhile optimisation. On any other website it won't hurt to use 5 divs for this, but a PNG "sprite" may be more flexible if you plan to use it also on overlays (for the sides and corners).