CSS3 has been in development for some time now. As more specifications are finalized we, the markup masters, get to use them on the more advanced web browsers (Firefox, Safari, Opera, Chrome etc..).
I recently had the chance to sit down and play with the box-shadow property. Box-shadow is just what it sounds like. You can add shadows to box elements without the use of Photoshop.
So there you have your basic drop shadow. The CSS code looks like this:
box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 5px 5px 5px #888888;
-moz-box-shadow: 5px 5px 5px #888888;
Currently these only work in Firefox, Safari, Chrome and Opera. Each browser is using their own CSS selector but they all work exactly the same.
box-shadow: horizontalAlign verticalAlign blur color
CSS box-shadow eliminates the need to use images for drop shadows. What makes box-shadow even more interesting is the way it interacts with other CSS properties. In my next example I put a small drop shadow along with a border radius and a 1px white border to create a simple but appealing content box.
And there you have it, an image-less style for comment boxes or content boxes. Quick loading and easy on the bandwidth. CSS3 is awesome.
