UPDATE: 14.09.2007.
The unfortunate forgery of this article has been removed from the the Internets. Yay! The victory is ours!
UPDATE 13.09.2007.
Due to great demand, now you can download all files in 1 zip file
VISTA_toolbar.zip (20.36 kb)
I want to show you what you can do with a minimal
effort and a little imagination. Here's a screenshoot from Windows VISTA. We'll try
to reproduce that toolbar, with buttons and hover effect in cross-browser compatible
CSS and HTML.
Screenshoot from Windows VISTA
Our toolbar with few line of css and html.
Click to see live demo
Toolbar
We'll define toolbar as user list tag ->
<ul>. <ul> tag will be in #vista_toolbar <div> tag. Each <li> element will be toolbar
button. So when you need a new button you just add new <li> tag, hmmm I
just love CSS! Here's how it looks in HTML
<div id="vista_toolbar">
<ul>
<li>...</li>
</ul>
</div>
Ok, lets define CSS for this elements
First <div
id="vista_toolbar">
#vista_toolbar
{
float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
}
It's straightforward.
<ul>
element CSS
#vista_toolbar
ul {
background-image:url(back.gif);
background-repeat:repeat-x;
float:left;
line-height:32px;
list-style:none;
margin:0;
padding:0 10px 0 10px;
width:500px;
}
Height of toobar
define with „line-height:32px;“ and width with „width:500px;“. And 10 px
padding because we don't want to start with buttons from beggining of toolbar.
<li> element
CSS
#vista_toolbar
li {
display:inline;
padding:0;
}
Display „inline“
because we want our buttons to be displayed in row.
Buttons.
How to create a button? It's simple, we will
use Sliding doors technique.
Just crop picture of button.
left.png
right.png
we'll add this
picture on a:hover in CSS and it works in IE6 as well. Let's go!
HTML code of button
<li>
<a href="#">
<span>Add New</span>
</a>
</li>
If you want add
picture next to text just add <img align="left" src="files/add.gif"
alt="add new" /> in <span> tab
Example HTML code
for button with image:
<li>
<a href="#">
<span>
<img align="left" src="files/add.gif" alt="add new"/>Add New
</span>
</a>
</li>
Put it in work with
CSS
#vista_toolbar
a {
color:#FFF
float:left;
padding:0 3px 0 3px;
text-decoration:none;
}
Color property is defined because we need to override default link color
with white color and also text-decoration.
#vista_toolbar
a span {
display:block;
float:none;
padding:0 10px 0 7px;
}
#vista_toolbar
a span img {
border:none;
margin:8px 4px 0 0;
}
If we have image next to text we must center her vertical with margins.
Here is a CSS code used to make hover effect
#vista_toolbar
a:hover{
background:
url(left.png) no-repeat left center;
}
#vista_toolbar
a:hover span {
background:url(right.png)
no-repeat right center;
}
Cross-browser compatibility?
Tested in:
Firefox 2, IE 6, IE 7, Opera 9.2, Safari 3.0.3 for Windows
If you
test in other browsers please let me know.
Summary
I hope this tutorial was helpful. Feel free to post any comment.
Have a great week!