CSS3 Glow Tabs

The other day I visited the jQuery Conference page, and immediately fell in love with the beautiful design and CSS3 technique applied to the tabbed navigation on that page. Visit the site in a Webkit-based browser (Chrome or Safari) or Opera 10.5, and you’ll see a nice “glowing” rollover effect along with a subtle inner shadow at the bottom of the inactive tabs.

But that’s not all; they’ve also applied some rounded corners and gradients to complete a very nice effect. All with no images — just progressively enhanced with CSS3 so it degrades in non-supportive browsers. I immediately set out to recreate the effect, and I thought I’d write it up so you can see how CSS3 can create intuitive and beautiful interfaces with no images.

View the demo, or look at the example on the jQuery Conference site, if you want to review what I’ll be describing.

The “Glowing” Hover Effect

Most of the CSS and HTML is pretty straightforward, so I won’t bore you with those details, I’ll just focus on the two primary effects that make the tabs so visually appealing. First of all, I figured since it was a website related to the jQuery library, then they must be using jQuery for the “glow” effect. I’ve seen the effect before, and it’s usually done with JavaScript. In this case, they’re using CSS Transitions, and it’s dead simple to produce:

If you’re unfamiliar with how the above code works, here’s a CSS transitions 101 lesson: The -propietary-transition declaration is shown above in shorthand for 3 different rendering engines, and according to the Webkit website, here is what the three values represent:

The second section in the CSS gives the hover event for the navigation tab, and this combines to create the animated “glow” effect. If a browser doesn’t support the transition, then it just does a straight hover without the glow.

The Inner Shadow

This is the tough part, and it does unfortunately muck up our markup a little bit. But it’s a nice effect, and you could always use JavaScript to create the extra element to keep your markup clean. In the HTML, we add an extra empty list item at the end of the list, giving it a class of “shadow” and style it with the following:

The absolute positioning to place the element at the bottom of the tabs

The full width, so the shadow spans the entire tab section

The CSS3 box shadow

The z-index value of “2”, which ensures the shadow is below the “selected” tab; the selected tab has a z-index of “3”; the inactive tabs are set to z-index “1”

Rounded Corners and Gradients to Boot

Finally, the effect is completed with the CSS3 border-radius property and a CSS3 gradient on the active tab. The gradient has an IE-only filter applied (in my example), so IE does get a fraction of the effect.

And that’s pretty much it. The rest of the CSS is just your usual run-of-the-mill tabbed navigation styles. I’ve also included some jQuery to change the selected tab.

The full effect works in Chrome, Safari, Opera 10.5, and Firefox 3.7. Technically, Firefox 3.7 has not been officially released, but according to Mozilla CSS3 transitions will be included in that version.

Fantastic writeup Louis! I am the developer that designed and built the jQuery conference site and had a ton of fun making those tabs. I love how you covered all the steps here in such detail.

One thing that saved me a lot of typing during the development was http://css3please.com. Basically you enter what you want for one of the settings, and it gives it to you for as many browsers as support it.

Again, thanks again for sharing this with the community and I am glad the site inspired you!

That’s bizarre, George. I have no idea why you wouldn’t see the glow effect. Nobody else has reported any difference, and the creator of the page even commented here, so he obviously doesn’t see a difference. No idea what to tell you. Clear your cache?? Seems pointless, but I don’t know what else to say.

Greg, you’re not crazy, that artifact effect is happening in Safari. I do everything in Chrome nowadays, and I only checked briefly in Safari, so I never picked up on it. I went through the entire CSS file, removing various things, then putting them back, and trying to change the transition code, but nothing seems to fix it. I contacted Doug about it to see if he has any feedback.

It should be noted that I didn’t take his styles and put them into my code. I took a look at his code, then I used that as a rough guide to recreate it myself.

Good eye, Greg. I hope I can figure out what is causing that. It is strange considering Chrome and Safari both use Webkit.

Okay, after some extensive poking around, debugging, and comparing to the original version, I figured out that my problem was that I had a background color on the list item that the transition on the anchor was fading into, so it didn’t seem to react well in Safari because of that.

So, I added the same background color to the anchor, and now it seems to be fixed in Safari. Although I still think it looks smoother in Chrome, but not by much.

Hi! This stuff is very nice and appealing and I am using it but I came across a problem while using FF 3.6.3:
When I put a working link in the hrefs of the navigation, it doesn’t go that link, the css classes are added and removed but the link is not opened. I actually have to remove the jquery…
I’ve just tested on IE7, it works as long I dont click on the allow blocked content, and I won’t use IE anyway, so could you please try to help me…

I believe the problem you’re experiencing is due to the “return false” in the JavaScript. With that statement, it will prevent the HREF from being visited. I just put that there for the demo example, to prevent the hash from appearing in the URL when a link was clicked.

Thx.
Another thing is that am using it on a .net website app, the links are accessible but when clicked, the selected css is applied to that tab and then quickly removed to return to the default selected tab…
Anyone has got an idea how to solve this postback issue? (The jQ is found on a master page)

Hm… Unfortunately, I can’t test on a Mac. It works fine for me in Chrome 5x, Opera 10.53, and Safari 4 (all on a PC). If you could do me the favour of comparing the code on my version and the jQuery Conference site version, and trying to figure out what the difference is, that would be great.

Also, the original creator of the tabs on the jQuery site posted a comment above, so he didn’t indicate that the glow was not working for him. Of course, I have no idea what system he uses.

This tutorial is only about the glowing CSS3 tab effect, not the content switching. If you’re referring to a content switcher that changes when the tabs are clicked, you can find something similar in these tutorials:

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.