How to create VISTA style toolbar with CSS
4. Augustus 2007UPDATE: 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
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
<ul> </ul>
Ok, lets define CSS for this elements
First
#vista_toolbar {
float:left;
font:normal 12px 'Trebuchet MS','Arial';
margin:0;
padding:0;
}
It's straightforward.
<ul> element CSS </ul>
#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.
#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
If you want add picture next to text just add 
in tab
Example HTML code for button with image:
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!
No comments:
Post a Comment