In this post I'm going to show you how to create a Web 2.0 header with CSS. To accomplish this, we only need to define our underlying markup, a couple of background images and, of course, our CSS styles. Let's see how.
First we have to define our HTML markup which will also feature a top navigation menu:
<div id="site"> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contacts</a></li> </ul> <div id="header"> <h1>Site Name</h1> </div> </div>
In our CSS rules, we also need to have a Google Web Font, so we include it at the very beginning of our CSS:
@import 'http://fonts.googleapis.com/css?family=Sniglet:800';
This font is called Sniglet. Then we define our global rules:
body {
margin: 0;
padding: 0;
font: 62.5% Arial, sans-serif;
background: #fff;
color: #333;
}
#site {
width: 100%;
font-size: 1.4em;
}
The actual font size used on our main container will be about 14 pixels. Now we can stylize our navigation menu:
#navigation {
margin: 0;
height: 3em;
padding: 0 1em;
list-style: none;
}
#navigation li {
float: left;
height: 2em;
margin-top: 1em;
margin-right: 1em;
padding-left: 1em;
background: url(tab-left.png) no-repeat;
}
#navigation a {
float: left;
height: 100%;
padding: 0 1em 0 0;
line-height: 2;
background: urltab-right.png) no-repeat 100% 0;
color: #fff;
text-decoration: none;
font-weight: bold;
}
Our menu is a simple tabbed menu achieved through the use of background images. Our next step is to stylize the header itself:
#header {
margin: 0;
height: 10em;
background: url(header-bg.jpg) repeat-x;
}
#header h1 {
margin: 0;
height: 100%;
width: 500px;
background: url(header-left.jpg) no-repeat;
font: 5em Sniglet, sans-serif;
color: #0084e4;
padding-left: 140px;
line-height: 140px;
text-transform: uppercase;
}
Our header has a level-one heading inside of it. The header has a tiled background image repeated horizontally, while the heading has a background image that simply depicts a Web 2.0 badge on its left side. You can see the demo below.