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.
Don’t know how I stumbled across this website but I just wanted to give you the heads up on my thinkpad, chrome browser the font/text is almost unreadable…
but I managed to read it regardless, good stuff! Keep blogging.
Thanks for the heads up, I’ll look into it.
Love the feel here dude… great work!
BTW: the top navigation isn’t working for me. (using Chrome on Windows 7)
Hey thanks man! I actually JUST launched this new design late last night and I didn’t have the time to finish those pages…I was so anxious to get it live.
Those pages should be live tomorrow. Thanks for the comment!