CSS3 Drop and Box Shadows

With the addition of shadows to CSS, in CSS3, the need for photoshop is getting slowly eliminated. Now if we want to do a drop shadow on text, or a div, all we need is CSS. Remember though, these shadows are only supported in firefox, and webkit browsers, so be careful in using them!

Text Shadows

With text shadows, you can take any text that you have, be it a header, a paragraph, a span, and add a shadow to it. Let's take this example html code

<span> Hello World! </span>

This would give us the following:

Hello World

Now let's apply some basic CSS to it

span {color: blue; font-size: 20px;}

This would give us the following:

Hello World

Now let's get our hands dirty with a little CSS3 text shadowing.

text-shadow: 2px 2px 2px #000;

This would get us the result of:
Hello World

You can further adjust the colors, etc. in order to great a truly cool looking text-shadow effect.

Box Shadows

With Box Shadows, you can take any box element, a div, or an image for example, and put a drop shadow on it.

Let's start with some basic html code.

<div><span>Hello World! I am Content</span></div>

Let's add some basic CSS code.

div { width: 200px; height: 200px; background: green; }

Let's add a drop shadow.

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

And we get a result like this:

Hello world! I am content

You can further change this to get a truly cool box/ drop shadow.