skip to content
Website Builder

CSS3 - The future now - Fitted Tabs
border radius / drop shadow / gradient fill

29th January 2010

Tabs to fit the text with no extra markup and no images. NO MORE FITTED DOORS! (sooner or later)





©2010 stu nicholls - cssplay.co.uk


CSS play Support


CSS play Recommend

PSD to HTMLFree, practical CSS menus, layouts, and examplesSitegrinderuk white label shopping carts for resellers

Follow CSS play

Facebook   Twitter



Information

No graphics and no extra markup , just CSS3 styling to produce a tabbed menu with rollover color change.

This one uses CSS3 styling to give corner radii, drop shadows, gradient fill, text-shadows and rollover color changes.

The only criticism I have with this is that you need to repeat the gradient overlay when changing the background color on hover. I would have liked to see the overlay automatically change when the solid background color changes.

This works in Firefox, Safari and Google Chrome. Other browsers will just see a rectangular buttons with solid background color which changes on hover.




Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.




 

CSS play Testimonial

"The citroen.co.uk web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth