The beauty of CSS3 is not just in the fancy effects, but also in the numerous ways it provides for styling your semantic, up to the point and concise markup. The solution below demonstrates how to create a imageless navigation bar with CSS3 gradients and shadows, and even apply icons by using generated content via the :before pseudo element. Here‘s the final and crossbroser (with fallbacks for older browsers) result:
… Produced by the following markup:
<ul>
<li><a href=”#” title=”RSS”>RSS</a></li>
<li><a href=”#” title=”Blogger”>Blogger</a></li>
<li><a href=”#” title=”MSN”>MSN</a></li>
</ul>
… And the CSS explained in brief (on the demo page you can view the complete stylesheet or download the example):
1. The normal state of the buttons:
Since no browser supports the official W3C background gradient properties yet, we define them separately for each browser, making sure that we put a fallback alternative for browsers that do not support gradients before all other gradient properties. Our solution will support gradients for IE5.5-9, Mozilla FireFox 3x, Apple Safari and Google Chrome. Opera will display a solid color background, as it still does not support CSS3 gradients.
2. For the :hover state we just change the properties we need to look different:
ul.menu a:hover
{
border-color: #000062;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#dbdbdb”, endColorstr=”#ffffff”);
background: #dcdcdc;
background: -moz-linear-gradient(
center bottom,
rgb(255,255,255) 0%,
rgb(214,214,214) 50%,
rgb(235,235,235) 71%,
rgb(248,248,248) 85%
);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,255,255)),
color-stop(0.5, rgb(214,214,214)),
color-stop(0.71, rgb(235,235,235)),
color-stop(0.85, rgb(248,248,248))
);
background: linear-gradient(top, #dbdbdb, #fff);
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
box-shadow: 0 0 6px #000;
}
3. The :active state is even skinnier:
ul.menu a:active
{
-moz-box-shadow: 0 0 2px #000;
-webkit-box-shadow: 0 0 2px #000;
box-shadow: 0 0 2px #000;
}
And now the most interesting part. CSS3 supports multiple backgrounds on a single element, but still no browser provides means to inherit certain common properties from a parent element, so in order to apply icons we should use the :before pseudo element instead of definining multiple backgrounds (the gradient plus the icon) separately for each button:
1. Create a common :before rule that will be the same for all buttons in the menu:
The above instructs the browser to render a pseudo element before the actual content of the element with the properties we define. Now we have a square 24 x 24 pixels inline-block element, which can accept a background image (the icon). To have a different icon for each button we apply classes to out <a>…</a> tags and then use this simple rule for each button:
To optimize even more out menu we can use a single sprite for all icons in the menu or embed the images directly in the stylesheet as bas64 encoded data.
On this page you can see a working demo of the example and you can download it in case you need it. The example works with FireFox, Chrome, Safari, Internet Explorer and Opera. Internet Explorer 5.5 6 and 7 will not display the icons, because these browsers do not support generated CSS content, but still the gradients will work. Internet Explorer will not render the shadows and the rounded corners, but IE9 will.
Find more experiments here.