Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Apple Style Menu Using CSS3 and Webkits
Introduction
There is a good reason for Apple using the WebKit Open Source Engine to drive both it's Mac Operating System and 'Safari' Browser. WebKit is currently head and shoulders above other engines when it comes to implementing all the things that make Apple software and it's websites instantly recognisable. Gradients, text shadows, box shadows and opacity values are the things that Apple are made of.
Even if you don't run a Mac then you can appreciate the CSS3 effects that WebKit can offer by using Google's 'Chrome' Browser.
In this tutorial I will cover how to create an Apple style website menu using no images at all and relying only on the goodies that WebKit has up it's sleeve. As ever, bear in mind that CSS3 is not fully functional across all browsers and that I am targeting the menu at users of WebKit driven browsers.
Here is an image of the menu we will create;
Marking Up the Menu
The first thing we need to do is to mark up the menu itself in HTML5. There is nothing here that you won't have seen before except that the menu makes use of the 'nav' Tag introduced with HTML5;
<nav class="gradient">
<div id="at">@</div>
<ul id="webkitnav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Goods</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Hopefully you have noticed that even the '@' symbol used on the menu is pure HTML text.
Gradient and Box Shadow
Now we want to introduce a background gradient for the menu by creating the class 'gradient';
.gradient {
position: relative;
padding: 0 20px;
width: 500px;
background-color: #D2D2D2;
overflow: hidden;
-webkit-border-radius: 5px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#949494));
-webkit-box-shadow: 2px 2px 3px #888;
}
You should be familiar with the first few rules so I will concentrate on the Webkit (-webkit-) properties I have used. The first one gives the menu it's rounded corners. The value stated is simply the number of pixels required for the radius on the border. In this case 5px. You can always experiement with different values until you get the required look. It is worth noting that you do not have to have a border set on the Tag to use 'border-radius' as the background will become rounded as required.
The second property is new to WebKit at the time of writing this and is a method for creating gradients without images. The 'gradient' property uses a few parts to create the gradient. First is the 'type'. 'Linear' tells WebKit that we want a straight gradient. The alternative currently available is 'radial'. The second values are called 'points'. You can use numbers, percentages or the usual 'left, right, top and bottom' rules with this. As we need our gradient to go from the top to the bottom of the menu bar, that is what we have specified. The third values tell the browser what the hex values are for the gradient colours and these are specified as 'from' and 'to' values. Pretty straight forward.
Property three is the 'box shadow' property. There are four things specified in the CSS code. The horizontal and vertical off-sets, the blur radius and the colour of the box shadow. I have tried to keep this effect as subtle as Apple's genuine navigation bar. I'm not keen on box shadows that make items seem three inches off the page!
Now we have the outer wrapper for the menu;
Lists and Text Shadow
The next step is to style the list used in the menu. Here is the CSS for the list Tag;
#webkitnav li {
float: left;
list-style-type: none;
display: block;
padding: 10px 0px;
border-right: 1px inset #888;
}
You might have wondered why I have used the 'overflow hidden' property, usually reserved for clearing floated elements in modern browsers, for the menu background? Well, we need to float the menu left rather than use 'display inline'. The reason is that I want my 'over state' or 'hover' effect to fill the whole menu and this can only be achieved if the list is in its natural 'block' state. As floating an element takes it out of the natural flow of the site I have used 'overflow hidden' to clear the float.
We also need to style the four link 'states'; link, visited, hover and active;
#webkitnav a:link {
font: bold normal 12px/20px Helvetica, Gevena, sans-serif;
color: #000;
text-shadow: 0px 1px 1px #fff;
padding: 10px 10px;
}
#webkitnav a:visited {
font: bold normal 12px/20px Helvetica, Gevena, sans-serif;
color: #000;
text-shadow: 0px 1px 1px #fff;
padding: 10px 10px;
}
#webkitnav a:hover {
color: #fff;
text-shadow: 0px 1px 1px #000;
background-color: #666;
text-decoration: none;
padding: 14px 10px;
}
#webkitnav a:active {
color: #fff;
text-shadow: 0px 1px 1px #000;
background-color: #666;
text-decoration: none;
padding: 14px 10px;
}
You should already recognise the majority of what I have used here but you may not have used a 'text shadow' before. This works in the same way as the 'box shadow' I described above with a horizontal and vertical offset, radial blur and a colour value. In the case of this menu we want black writing with a subtle white shadow to get that 'Apple look'. I have also reversed these colours and added a darker background for the 'hover' and 'active' states.
The final piece of the puzzle is the '@' symbol at the end of the menu. This is achieved using an absolutely positioned div and the 'opacity' value introduced in CSS 2.1. The CSS is;
#at {
position: absolute;
left: 490px;
top: -7px;
font-size: 40px;
font-weight: bold;
color: #FFF;
opacity: 0.2;
}
The 'opacity' value of 0.2 means that you can see through the '@' symbol to the gradient below and creates a great finishing touch to the menu.
The full menu can be seen below in WebKit browsers.
As ever with these tutorials I know that you won't be able to use it effectively for a website for a few years yet but, eventually, it may become feasible so I believe that it is worth experimenting and practicing with these techniques now to get ahead of the pack.
