CSSPLAY

CSS MENUS › Fitted Tabs with border radius/drop shadow/gradient fill

Date : 29th January 2010

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

• HOME
• PRODUCTS
• SERVICES
• LOCATION
• SITE MAP
• PRIVACY POLICY

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

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. 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.