I just finished designing a web page for a smaller local security company and I thought I’d put CSS3 to the test with border-radius, box-shadow and multiple backgrounds. I know it’s risky to implement CSS3 at this point due to somewhat lousy browser support, but withholding the use of it will most certainly not speed up the development. The site looks, as expected, much sharper and flatter in IE because of the lack of rounded corners and box-shadow. The multiple background is a just a small bonus to the design at this point, but it would still be nice if all browser presented the same output.
Here’s a quick presentation of all three effects.
Box-shadow
-webkit-box-shadow: 3px 3px 5px #000;
box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 0px #333;
box-shadow: 3px 3px 0px #333;
-webkit-box-shadow: 1px 1px 0px #999;
box-shadow: 1px 1px 0px #999;
The values represent 1) horizontal offset 2) vertical offset 3) blur radius and 4) shadow color. RGBa colors can also be used but are not supported to 100% at this time.
Multiple backgrounds
background-position: top left, top right;
background-repeat: repeat-y, repeat-y;
The values are separated by commas, e.g. first image, second image etc.
Safari 4 displays all effects perfectly, as does Firefox 3.6.