Drop Shadow using CSS

I'm certain most people who have used a copy of photoshop have used the drop-shadow effect, you know it's the effect that makes the item look like it is floating. Unfortunately it can be a pain to have to create an image and put a drop shadow effect on it, and then include that image into your website. Well here is a very simple way to perform a drop shadow using css. (This is compatible with the most latest version browsers... Hehehe IE 5 and IE 6 are things of the past, and hopefully they will be forgotten forever)

To perform a drop shadow to any specific HTML element add the following code to your stylesheet:

#box
{
	-moz-box-shadow:0px 0px 10px #444444;
	-webkit-box-shadow:0px 0px 10px #444444;
	box-shadow:0px 0px 10px #444444;
	padding:10px;
}

Then you will add the following to your HTML file:

<div id="box">

<p>This <br /> is a <br /> box.</p>

</div>

Of course, you can do some manipulation of the drop shadow such as direction and colors by changing the attributes in the CSS code.

Okay, one more thing if you want to add rounded corners to the box it will have an even nicer look. Here is the css for a box with a drop shadow and rounded corners:

#box
{
	-moz-box-shadow:0px 0px 10px #444444;
	-webkit-box-shadow:0px 0px 10px #444444;
	box-shadow:0px 0px 10px #444444;
	padding:10px;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

Your box will now look a bit better with rounded corners.

Just a few tips, that may help save some time ;)