So far I’ve only needed to use the css3 box shadow technique on white or very light backgrounds. Recently a project required using css3 based shadows on top of images with varying backgrounds, and the lack of transparency was pretty glaring on darker images. Just before resorting to 24-bit png shadows, I remembered reading about RGBa transparency and gave it a shot. Presto! Works like a charm. Below is the setup I used for a basic black drop shadow with 50% transparency.
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
If you’re unfamiliar with the box-shadow module in CSS3, it requires three lengths and a color attribute. The atrributes are (in order):
- Horizontal Offset – Positive values move the shadow the right, negative values to the left.
- Vertical Offset – Positive values move the shadow down, negative moves it up.
- Blur – Can also be thought of as the “sharpness” of the shadow. 0px would make a very sharp shadow, higher values will increase the blur.
- Color - Can be any valid hex or rgb color, but in this case we’re using RGBa which adds an alpha channel to achieve transparency.
Keep in mind that RGBa is not supported in IE or FireFox 2.0, but works beautifully in Chrome, Safari, and FireFox 3.0.