Although I don't understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we're using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

This tutorial takes on the following CSS(3) properties:

• rgba
• opacity
• text-shadow
• pseudo selectors
• rounded corners
• gradients
• box-shadow

  

As you could expect, this demo only works in browsers that support the new CSS3 features. This code fully works in Safari / Firefox 3.6, but hasn't been tested in other browsers. Now let's see how you can create this kind of sweet menu yourself!

HTML

Before we do anything fancy with CSS, we'll need a decent backbone in the form of HTML. As you can expect, the menu excists from an ul with items (links to pages). We'll also add a main content division, but this tutorial has the focus on the menu.

 
<div id="menu">
   <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Blog" class="active">Blog</a></li>
      <li><a href="#" title="About">About</a></li>
      <li><a href="#" title="Register">Register</a></li>
      <li><a href="#" title="Contact">Contact</a></li>
   </ul>
</div>
<div id="main">
   <h3>Main content header</h3>
   <p>Main content</p>
</div>

Nothing really fancy or hard going on here, so I suggest we take our first steps into the CSS.

Simple CSS

First, we'll need some basic styling to the HTML we just created. We want to display the navigation inline and see no bullets what so ever. This is the code we need:

 
#menu { margin:40px 0 0 150px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; float:left; margin-bottom:20px; }

Our outcome (see below) might look a little bit dull, these are the foundations we're going to work with in order to achieve what we want.

RGBA, opacity and Text-shadow

Now, we're going to use some of the CSS3 features to make this simple navigation look beautiful. We'll select the anchor tags within the menu, and apply some styling to it. CSS3 supports RGBA() to select a colour. The fourth parameter sets the opacity of the element. We'll also use text-shadow to give the text an "outer glow" effect.

 
/* background color set to RGBA, with opacity on 0.3 and also using text-shadow */
#menu ul li a { padding:20px; background: rgba(255,138,30,0.3); text-decoration: none; font: bold 14px Helvetica, Sans-Serif; letter-spacing: -1px; color: #402e16;
    text-shadow: #eee 0px 0px 2px; }

We now have already something very fancy looking:

Looks pretty nifty already, doesn't it? But we're not done yet - on to the next step!

Pseudo Selectors and Rounded Corners

Now that we have our navigation, we'll take it to the next level. The first anchor tag will have a rounded top-left corner, while the last one will have a rounded top-right corner. This will enhance the effect of tabs a little bit more.

With the use of pseudo selectors, we can easily find the first and last anchor element in the list, without the need of extra classes. Check out the following code:

 
/* :first-child pseudo selector with rounded top left corner */
#menu ul li:first-child a { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius:12px; }
 
/* :last-child pseudo selector with rounded top right corner */
#menu ul li:last-child a { -moz-border-radius-topright: 12px; -webkit-border-top-right-radius:12px; }

When applied, the menu will look like this:

Whoah - looking better every step! But don't stop here, we'll add some more beauty to this menu in the next step.

Gradient and Box-shadow

Now that we have our menu fully complete, we want to place the cherry on the cake by styling the .active and :hover state of the menu. The first one is created to indicate the user is currently viewing that tab (added by the class in the HTML). The second one is the hover state.

The .active state isn't very spectecular: It'll have the same RGBA colour as the normal state, but with less opacity (0.8). The :hover state will be a little bit more complex.

With CSS3, you'll have the ability to create gradients. In this example, I'll go with a simple linear, two coloured gradient, but the possibilities are endless. You can use this great CSS3 gradients tool (just like I did) to help you a little bit out creating the CSS gradients. We'll also add a slight grey shadow on top, to enhance the 3d tab effect.

 
/* hover state shows a linear gradient and opacity it brought down to 0.9 and also shows a very slight grey shadow on top */
#menu ul li a:hover { -moz-box-shadow: 0 -5px 10px #777; -webkit-box-shadow: 0 -5px 10px #777;
   background: -webkit-gradient(
      linear, right bottom, left top, color-stop(0, rgb(237,227,112)), color-stop(0.72, rgb(255,173,10))) !important;
   background: -moz-linear-gradient(
      right bottom, rgb(237,227,112) 0%, rgb(255,173,10) 72%) !important;
   background-color:rgb(255,173,10) !important;
   -moz-opacity:.90; filter:alpha(opacity=90); opacity:.90; }
 
/* another RGBA background, now with an opacity of 0.8 */
#menu ul li a.active { background: rgba(255,138,30,0.8) !important; }

With all that CSS, our menu looks like this (one is active, the other one has the hover effect):

How about that for a sweet CSS3 powered menu!

More CSS

Since we finished our CSS3 powered menu, we can style our main part a little bit. I don't need to explain any of the code here, since all effects applied are used in the menu too!

 
/* main contents with RGBA background (same colour as active tab) and three rounded corners */
#main { clear:both; background: rgba(255,138,30,0.8); width:500px; margin-left:150px;
   -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px;
   -webkit-border-top-right-radius:12px; -webkit-border-bottom-right-radius:12px; -webkit-border-bottom-left-radius:12px;}
   
/* header with a text-shadow */
#main h3 { text-transform:uppercase; padding:20px 0 0 20px; color:#eee; text-shadow: #000 0px 0px 2px; }
#main p { padding-bottom:20px; color:#ddd; }

With that, our final page looks like this:

And we're done!

Conclusion and Download

I added a little jQuery script to virtually switch between pages, but of course this needs to be done server-side and show the actual page. I think CSS3 has some very neat features, where some of them are used in a great way in this tutorial. Sadly, since this isn't cross-browser compatible, we'll need to wait for a while before we can use this in the public.

  

What do you think? Do you see any room for improvement in this code? Do you like it? Feel free to share your two cents!

Interested in this topic? You might enjoy another article I've written called

• jQuery quickie: Slot machine navigation
• Animated wicked CSS3 3d bar chart
• Wicked CSS3 3d bar chart
• jQuery quickie: Colourful rating system with CSS3
• 3d animation using pure CSS3

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New Search RSS

Magne Andersson   2009-12-07 13:25:31 I've used several of these features on sites, and I think they are a great addition to CSS. "Although I don't understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we're using today." It's presentational, easy to use, reduce load time heavily and doesn't require you to learn JavaScript. It's a brilliant addition to CSS3. Reply | Quote

Marco - My two cents   2009-12-07 15:28:51 Thanks for your comment Magne! I personally don't think Animation is presentational, but behavioural. Feel free to check out my full opinion in my previous article (and share your opinion with others). Reply | Quote

deb   2009-12-07 15:13:59 I was wondering where is the gradient & then noticed my firefox is one version older . Looks very promising on Chrome/Safari. Reply | Quote

Marco - Firefox 3.6   2009-12-07 15:32:01 Hi Deb! Thank you for your comment! Firefox 3.6 hasn't been officially released yet (but probably will soon) and I'm personally using 3.5 too (which doesn't show the gradient). I didn't test this script on Chrome, but since it runs on the safe engine (-webkit) as Safari, I could have expect that it runs fine there too. Thanks for testing! Reply | Quote

Josh   2009-12-10 03:28:25 I love it. The pseudo selectors are the best part. Reply | Quote

BEBEN - Prodigy of Head   2009-12-10 18:38:04 so smooth and elegant Reply | Quote

Jon Crim   2009-12-10 20:17:46 I think it looks great, can't wait till it's cross browser compatible! Reply | Quote

fractalfrog   2009-12-12 11:05:02 Cross browser CSS3 compatibilty? Bwahahahahaha! Don't hold your breath for at least the next 5 years :-( Reply | Quote

Huan Le - How to add more content?   2010-02-22 17:20:33 How to add more content for Home - Blog - About.... because in demo only one content for all. I tried but not done... Please help me ? Reply | Quote

Brad - Nice example   2010-03-19 14:13:50 This is a great example of CSS3. I just think you could have gone further and made it degrade properly into older browsers. Reply | Quote

Robert Visser - history, bookmarkable tabs   2010-05-08 17:47:51 Hi. Thanks for posting. Impressed with the simplicity of the script.js. Wondering what's necessary to add the capability to bookmark individual tabs and history. For example, using the tab names in the demo, #home, #blog, #about, #register, and #contact would be added to the url. Thanks. Reply | Quote

Anonymous   2010-09-04 14:56:07 ide:' /> Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Unsubscribe from e-mail notifications.