Sexy CSS Toolbars
I’ve gotten some good feedback about my previous CSS tutorial, Sexy CSS Buttons, so I figured I would make a series of tutorials on creating a sexy user interface for Web applications using nothing but the power of CSS. This installment will teach you how to create a sexy toolbar, like so:
We are going to start by creating an unordered list using the HTML element <ul> and give it the classname toolbar. This will simplify the markup needed and will be fairly easy to decorate with CSS.
<ul class=”toolbar”>
<li>This</li>
<li>is</li>
<li>our</li>
<li>toolbar</li>
</ul>
Now we need to style the list. Most importantly, we need to set list-style-type to none to remove the bullets. Then we need to set the padding and margins:
list-style-type: none;
margin: 0px;
padding: 5px 0px 5px 0px;
The gradient is drawn on the <ul> instead of the individual <li>s. This gradient starts at 60% opacity and fades to 30% half-way, then has a harsh break to 20% until it fades out entirely. So, let’s add the gradient now:
background-image: -webkit-gradient(linear,
left top, left bottom,
color-stop(0.0, rgba(255, 255, 255, 0.6)),
color-stop(0.5, rgba(255, 255, 255, 0.3)),
color-stop(0.5, rgba(255, 255, 255, 0.2)),
color-stop(1.0, rgba(255, 255, 255, 0.0)));
background-image: -moz-linear-gradient(top,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.0) 100%);
Now add a one pixel highlight at the top, if you like. As with the CSS buttons, we need to specify one line for Webkit, one for Mozilla, and one for Opera.
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
The last thing we need to do for the <ul> is to set the background color, text color, and text alignment:
background-color: #222;
color: #fff;
text-align: center;
So, now that we have the list set up, we need to style its individual items. We need to make each item an inline-block element. Then we set margins and padding as well as a minimum width. To make the interface more application-like, we should also set the cursor to the default. You may also want it to look like a pointer, as if the buttons were links.
display: inline-block;
margin: 0px;
padding: 3px 5px 3px 5px;
min-width: 100px;
cursor: default;
It is very important to note that all of the major browsers render whitespace between inline elements (including inline-block) as a single space. So if your toolbar has spacing between the items, it’s probably because you have the next item on a new line. There are a couple of ways around this. Firstly, you could use a negative margin on all but the first element; this works pretty well, but it’s hard to give a space a pixel-width, as font size and other variables may change it. Secondly, you could just put everything on one line; for small toolbars, this is probably your best bet. Lastly, you could comment out all the whitespace:
<ul class=”toolbar” style=”background-color: #700”>
<li>This</li><!––
––><li>toolbar</li><!––
––><li>is</li><!––
––><li>red!</li>
</ul>
Since we have multiple items side-by-side, we don’t want two borders being drawn next to each other. Here we set only the top, bottom, and left borders. We’ll add the right border for the last item later.
border: 1px solid rgba(0, 0, 0, 0.5);
border-width: 1px 0px 1px 1px;
By using an inset box shadow, we can add a subtle highlight border inside each of our items. At the same time, we should draw a highlight underneath the item, to make it look as if it is set within the toolbar.
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2),
inset 0px 0px 2px rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2),
inset 0px 0px 2px rgba(255, 255, 255, 0.25);
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2),
inset 0px 0px 2px rgba(255, 255, 255, 0.25);
To make the items animate on hover in Webkit, we can set up a transition for the background property:
-webkit-transition: background 0.2s ease-in-out;
Now we need to set the font size to be small and bold, and draw a drop shadow above the text.
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
font-size: 8pt;
font-weight: bold;
The toolbar now looks mostly fine—we just need to add rounded borders to the first and last item and then give the last item a right border. For this, we can use the CSS pseudo-classes :first-child and :last-child.
ul.toolbar li:first-child {
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
}
ul.toolbar li:last-child {
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
border-width: 1px;
}
To set up hover and click states, we can use :hover and :active to set the background. For the clicked state, we should set the Webkit transition time to instantaneous. Here, the hover state is also used by the selected class, which you could use for the currently selected item.
ul.toolbar li.selected, ul.toolbar li:hover {
background-color: rgba(255, 255, 255, 0.25);
}
ul.toolbar li:active {
background-color: rgba(0, 0, 0, 0.3);
-webkit-transition-duration: 0.0s;
}
The last thing we need to do to make the toolbar complete is add a class for items which have icons. The best way to add icons is to set them as the background image of the item, which will ensure they are the same size as the text-only items.
ul.toolbar li.icon {
min-width: 0px;
padding-left: 30px;
background-repeat: no-repeat;
background-position: 10px center;
}
To see examples of the toolbars in action, head over to the Sexy CSS Toolbars page in my Experiments.
