Table Of Contents

• Description
• Examples
• Possible Values
• Browser Support
• Conclusions

Description

The box-shadow property allows drop shadows (as well as inner shadows) on block elements.

It is important to note that using box-shadow alone is not supported in any browser yet because CSS3 is not finalized is not even in the CSS3 specification anymore. Currently to get it working in WebKit browsers (Safari, Chrome) you need to use -webkit-box-shadow and for Mozilla browsers like Firefox you must use -moz-box-shadow.

Examples

Box with a normal drop shadow

box-shadow: 3px 3px 3px #666;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;

This box should have a 3px drop shadow.

Box with an equidistant drop shadow

box-shadow: 0 0 6px #666;
-moz-box-shadow: 0 0 6px #666;
-webkit-box-shadow: 0 0 6px #666;

This box should have a drop shadow on all sides.

Box with an inset shadow

box-shadow: inset 3px 3px 3px #666;
-moz-box-shadow: inset 3px 3px 3px #666;
-webkit-box-shadow: inset 3px 3px 3px #666;

This box should have a 3px inner shadow.

Box with a solid 2px drop shadow

box-shadow: 2px 2px 0 2px #666;
-moz-box-shadow: 2px 2px 0 2px #666;
-webkit-box-shadow: 2px 2px 0 2px #666;

This box should have a 2px offset drop shadow that is solid.

Box with a reverse 3px drop shadow

box-shadow: -3px -3px 3px #666;
-moz-box-shadow: -3px -3px 3px #666;
-webkit-box-shadow: -3px -3px 3px #666;

This box has a reverse 3px offset drop shadow.

Possible Values:

Browser Support

Supported Browsers

• Firefox (since version 3.5)
• Safari (since version 3.1)
• Chrome (since  first version).

Unsupported Browsers

• Internet Explorer
• Opera (rumored to be supported in version 10)

Conclusion

I hope the above information was useful. If you want to see more examples of this property, want to see other tutorials, or have a question or comment please leave a message below.

Cheers!

In this article I am going to show you how you can make an accessible CSS based rounded tab menu using some semantic HTML and a few images.

You can view the demo here.

You’ll see some similarity between this technique and A List Apart’s Sliding Doors menu, however there is one key difference between this technique and theirs and that is that the tabs on this menu are fully clickable. If you go to their working demo page, you will notice that you cannot click on the left portion of the tab which, for me, was not ideal.

Also, one other issue I had with ALA’s menu was that when clicked, it would leave a hit area highlight around only part of the menu item, rather than the whole menu item, which looks strange if you are using this menu in any sort of JavaScript menu or any menu that does not force the page to reload.

To solve this issue, I added an extra (somewhat) semantic span tag to the markup to create the desired rounded effect, while rendering the tab fully clickable. So, with that, here is the HTML we are going to start with:

The HTML

<ul id="menu">
    <li><a title="Link title here" href="#"><span>Home</span></a></li>
    <li><a title="Link title here" href="#"><span>About</span></a></li>
    <li><a title="Link title here" href="#"><span>Portfolio</span></a></li>
    <li><a title="Link title here" href="#"><span>Services</span></a></li>
    <li><a title="Link title here" href="#"><span>Testimony</span></a></li>
    <li><a title="Link title here" href="#"><span>Contact</span></a></li>
</ul>

Which will give you something like this:

Basic Styling

Now we need to add some basic CSS for styling. We need to make the menu run inline and to remove the default list formatting:

#menu {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu li {
    float: left;
}
#menu a {
    float: left;
    display: block;
}

After adding the CSS to the page, we should get something like this:

Making It Pretty

OK, so now we have an inline menu, but it’s not too pretty is it? Well, now we’re going to spruce it up a bit by adding some padding and text styling with some CSS and we’re also going to style the span tags that we added in to the HTML as well:

#menu {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu li {
    float: left;
}
#menu a {
    float: left;
    display: block;
    padding-right: 16px;
    padding-left: 0;
    font-weight: bold;
    color: #666;
    text-decoration: none;
    cursor: pointer;
}
#menu a span {
    float: left;
    padding-top: 8px;
    padding-bottom: 6px;
    padding-left: 16px;
    cursor: pointer;
}

What we did here was applied some padding to the right of the link and some padding to the left of the span tag to center the text in the tab. We also applied the “cursor” property to the span tag to make sure that the browser treats it as a link by showing the pointer icon when the user hovers over it with their mouse. You should see something like this:

Adding The Rounded Tabs

Now that we have a properly padded and colored menu, we need to add in the images that will create the rounded corner effect:

#menu {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: url(images/bg_menu.png) repeat-x left bottom;
}
#menu li {
    float: left;
    margin-right: 1px;
}
#menu a {
    float: left;
    display: block;
    background: url(images/bg_menu_right.png) no-repeat right top;
    padding-right: 16px;
    padding-left: 0;
    font-weight: bold;
    color: #666;
    text-decoration: none;
    cursor: pointer;
}
#menu a span {
    float: left;
    background: url(images/bg_menu_left.png) no-repeat left top;
    padding-top: 8px;
    padding-bottom: 6px;
    padding-left: 16px;
    cursor: pointer;
}

With the images in, we should see our menu looking about like this:

Looks pretty neat huh? Well now all we have to do is tweak a few little things and we should be good to go!

Finishing It Up

To finish things off, I am going to add in a little line in the background to tie the tabs together as well as give the tabs a hover state so they are interactive. One other little thing I am going to add is an “on” state which can be used to show which tab’s content is active on the page. So lets add in the CSS now and see what we can do:

#menu {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: url(images/bg_menu.png) repeat-x left bottom;
}
#menu:after {
    content: " ";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}
#menu li {
    float: left;
    margin-right: 1px;
}
#menu a {
    float: left;
    display: block;
    background: url(images/bg_menu_right.png) no-repeat right top;
    padding-right: 16px;
    padding-left: 0;
    font-weight: bold;
    color: #666;
    text-decoration: none;
    cursor: pointer;
}
#menu a span {
    float: left;
    background: url(images/bg_menu_left.png) no-repeat left top;
    padding-top: 8px;
    padding-bottom: 6px;
    padding-left: 16px;
    cursor: pointer;
}
#menu a:hover {
    background: url(images/bg_menu_hover_right.png) no-repeat right top;
    color: #333;
}
#menu a:hover span {
    background: url(images/bg_menu_hover_left.png) no-repeat left top;
}
#menu .on, #menu .on:hover {
    background: url(images/bg_menu_on_right.png) no-repeat right top;
    color: #000;
}
#menu .on span, #menu .on:hover span {
    background: url(images/bg_menu_on_left.png) no-repeat left top;
}

You’ll notice I added in a CSS rule for #menu:after. That piece of code is called a clearfix, which clears the floats used in the menu so that it does not overlap content below it. If you did not have this clearfix, the content following the menu will wrap around, causing many undesirable effects.

So now, after you’ve added the above CSS, you should see your menu looking about like this:

The “Home” tab has the class “on” applied to it and the “Contact” tab shows what the hover should look like. Now you’re done! Congrats!

Conclusion

And there you have it, an accessible, semantic rounded tab menu built with some lean HTML, a smidgen of CSS and a few images.

I have included the PSD files I used to create the tabs in the Zip file so that you can easily make your own, custom styled menus.

I hope you enjoyed this tutorial! If you’ve got any questions or feedback, please feel free to leave a comment below.