I switched to Mac earlier this year but there are a few Windows 7 design touches I really admire. Chief amongst them is the “frosted glass” effect that aero employs for window borders. To me this seems like an ideal problem for html5 and the canvas tag.

My version isn’t totally ideal in terms of the effect itself. The frosting points are visible, instead of being a translucent haze. I think to really make this work I’d need to blur the “frosting” layers. While there’s actually some credible work with html5 blurring (see: http://markos.gaivo.net/blog/?p=591), I’m afraid it would significantly tax the browser.

This component is pretty customizable. You can tweak the colors and opacity of the highlights, midtones, and background. Control the radius of the borders and show whether to draw a plain white background.

I set up a few live examples here: http://www.ditherandbicker.com/canvas-frosted-glass-effect/

You can download the single source file from: Sourceforge

In terms of coding examples:

<div id="smallGlass" style="height: 200px; width: 250px"></div>
<script type="text/javascript">
     new FrostedGlass('smallGlass', {'drawWhiteBackground': false});
</script>

Produces:

And

<div id="smallGlass" style="height: 200px; width: 250px"></div>
<script type="text/javascript">
     new FrostedGlass('smallGlass');
</script>

Produces: