Google's drop shadows in HTML -- how does it work?

Question

Recently gmail added some custom button and menu widgets in html. They've already tipped their hand as to how the gradient effect within the button works without images.

But there's also a subtle drop shadow behind the new menus, which doesn't appear to use images. There's also lots of crazy drop shadow effects in google maps.

Does anyone have any inkling as to how this works?

Answer 1

You can do drop shadows with CSS, semi-transparent PNG images or, better yet, through frameworks that do all the heavy lifting for you (like jQuery with appropriate plug-ins).

Answer 2

Not sure about Google's exact implementation, but this uses a similar/identical technique: http://www.sixapart.com/pronet/articles/ydsf_-_robust_c.html

Answer 3

The drop down menu is actually a table (the horror!), and the shadows are their own cells (the bottom shadow is a <tr> with three cells, one for each corner and one for the bottom edge). These cells are styled with CSS to have PNG backgrounds. The corners and bottom edge are sprites in this image: icons_ns5.png and the right is a sprite from this image: vimages7.png

So, for instance, the right edge looks something like this in CSS:

.rightShadowCell {
    background-color: transparent;
    background-image: url(http://mail.google.com/mail/images/2/5/chrome/vimages7.png);
    background-position-x: -12px;
    background-position-y: 0px;
    background-repeat: repeat-y;
}

Safari tells me that the computed style for that right shadow cell is actually:

-webkit-background-clip: border;
-webkit-background-origin: padding;
-webkit-user-select: none;
background-attachment: scroll;
background-color: transparent;
background-image: url(http://mail.google.com/mail/images/2/5/chrome/vimages7.png);
background-repeat: repeat-y;
display: table-cell;
font-family: arial;
height: 18px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
vertical-align: middle;
width: 3px;

As for IE 6, I haven't checked, but either they don't display shadows or they use the known fix for transparent PNGs in IE 6 from Drew McLellan.