I showed in a previous post how to use text-shadow with CSS3. Now it’s time to move on to something that’s just about as exciting, using Box-Shadow with CSS3. Throw it on a div, on a table, on an image.. anything goes! Of course it doesn’t work in every browser, but then again not much I talk about on this site does!

Check out the demo to see some examples and then keep reading to find out how to use Box-Shadow.

View Demo

Below are the examples from the demo page, with the code below it which made the shadow. For each shadow, you need to declare the dimensions for -webkit-box-shadow: and -moz-box-shadow:, which takes care of any browser that supports the box-shadow at this point.

The three numbers are similar to using text-shadow with CSS3, the first number is how far right the shadow is from the “box”, the next number is how far below, and the final number is the amount of blur for the shadow. Finally, you declare the color of the shadow.

You’ll see on a couple of them I used the awesome border-radius to show how the shadow wraps around a rounded corner. If you need a refresher on the border-radius declarations, look here. If you want to check out some examples and code of text-shadow, look here.

{
-webkit-box-shadow: 2px 2px 4px #000;
-moz-box-shadow: 2px 2px 4px #000
}

{
-webkit-box-shadow: 6px 6px 6px #444;
-moz-box-shadow: 6px 6px 6px #444
}

{
-webkit-box-shadow: 4px 4px 6px #F6C;
-moz-box-shadow:4px 4px 6px #F6C
}

{
-webkit-box-shadow: 6px 6px 10px #000;
-moz-box-shadow: 6px 6px 10px #000;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border:15px solid #F90
}

{
-webkit-box-shadow: 6px 6px 10px #990;
-webkit-border-radius:12px;
-moz-box-shadow: 6px 6px 10px #990;
-moz-border-radius:12px;
border:12px solid #000
}

{
-webkit-box-shadow: 0px 0px 20px #6F0;
-moz-box-shadow: 0px 0px 20px #6F0
}

{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000
}

Remember the old days when the only way to create a shadow on text was to make it an image? That’s good for search engines..right? Oh sure, just use some image replacement and then the search engines can read it. Not so easy for text edits in the future. Or for changing the color of the text or the background behind the text.

Fastforward to CSS3. Now we can define a shadow behind live text on a website. Wiggity whaaat? That’s right, simply with some good old CSS. Of course you’ll need to use a real browser, as of any other cool CSS technique, but I won’t even begin to go into that topic. So why is this so great?

• Search engines can read the text
• Easily change the color of the text
• Easily change the color, size, or blur of the shadow
• Easily change the background color or image behind the text
• Your friends will be like totally impressed

An example of this is the title to every article on this lil website of mine. Do you see the shadow behind the title “Using Text-Shadow with CSS3“? If you don’t for the love of god.. DOWNLOAD FIREFOX! Check out the demo for some more examples of text-shadow created with CSS3, and then continue reading to learn how to write the CSS.

View Demo

The CSS to create the text-shadow is pretty simple. It’s written like this:

{text-shadow: 2px 2px 4px #000}

The first number is how far right of the text the shadow should go, the second is how far below the text, and the final number is the amount of blur to apply to the shadow. Then of course the color of the shadow is declared.

You can see below the examples from the demo page, and below them are the CSS styles that create each effect.

In this next example you can see how you can create a beveled look by using a shadow that goes zero pixels to either side, but goes 1 pixel straight up above the text.

So there it is, creating text-shadows with CSS3. You might also want to check out a recent article where I show how to use border-radius with CSS3; (which is how the rounded corners on these divs above were created).

Using an unordered list is a simple and easy to style method of creating a navigation bar. Now with CSS3 and round corners created by the browser, it’s even easier to make a nice and clean nav. I introduced CSS3’s border-radius in a previous post, located here.

Check out the example I created, and then keep reading to find out how to create the above nav with nothing more than some CSS.

View Demo

First create your unordered list in your XHTML.

The first thing to do with your CSS is to make your unordered list display on the same line, and with no bullet points.

The next step is to style the links. We’ll add some padding around the links to space them out, and to give the background color the width and height we want. On the hover state of the links I made the border appear as you roll over the link.

You’ll see I made an “active” state for the current page you are on. I set the cursor for the active state to be the “default” cursor. This is so when you roll over the link of the current page you are on the pointer cursor will turn into the arrow, giving the illusion that it isn’t a link (even though it really is).

So there it is, with this basic foundation and your imagination you can make a variety of looks for your navigation. Enjoy!