Why Box Shadow should only use RGBA

While perusing <a href="http://www.linkedin.com/home" target="_blank">LinkedIn</a> the other day (now months ago), I noticed their "shadows" on their main menu nav were created with the Hexadecimal color <span style="color:#888;">#8888888</span>.

This is wrong for so many reasons.

A shadow is created from a lack of light, If I'm not mistaken, and #888 (for arguments sake, grey), is a shade; a color.

Forget arguing whether or not it actually is a color, there is no source to produce a grey shadow, only a black one with the presence of light, making it opaque.

What I am getting at is, if you want to cast a proper "shadow" on something, it involves transparency, not just color/shade.

Take this Fiddle for example: <a href="http://jsfiddle.net/jakie8/dsMVn/1/" target="_blank">View in a New Window</a>

Before you click the screen (on the fiddle) and toggle the background red, take note of the shadows. They look so so similar, and thats why this is easy to f*ck up, because when you throw in the element of color (click the fiddles background now, it toggles red), you can see our RGBA box shadow is being "casted" like a bo$$ while our... well, Hex one stays #888.

Nuff said.

Note: Since writing this tip, LinkedIn has updated their website, but the point still proves valid.