CSS: Web 2.0 header

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>
<div id="header">

 <h1>Site Name</h1>



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.


Live demo

Leave a Reply

Note: Only a member of this blog may post a comment.