STYLE SHEETS

Creating an Artistic Blog Header with CSS Sprites

In this fourth part of a seven-part series, I build the header section of a sample blog site. It will use another set of CSS sprites -- or, in other words, a different background image -- to decorate the sections comprising its navigation bar.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

March 04, 2010

TABLE OF CONTENTS:

Before I get my hands dirty and start creating the header section of the example blog mentioned in the introduction, I'm going to reintroduce the full source code of the example developed in the previous part of this series. It showed how to exploit the functionality of CSS sprites for building an elegant, standards-compliant navigation bar.

Here's the background image that contains the set of CSS sprites required for defining the distinct sections of the bar. Take a look at it:

With the above graphic available for free manipulation via CSS, constructing an attractive navigation mechanism is as simple as coding the following web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Stylish navigation bar using CSS sprites</title>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 30px;

}

/* navbar */

ul#navbar {

width: 780px;

height: 100px;

margin: 0;

padding: 0;

list-style: none;

}

ul#navbar li {

float: left;

width: 130px;

height: 100px;

}

ul#navbar li a {

display: block;

width: 130px;

height: 100px;

text-indent: -9999px;

}

/* About section */

ul#navbar li#about {

background: #800040 url("bg_navbar.png") 0 0 no-repeat;

}

ul#navbar li:hover#about {

background: #800040 url("bg_navbar.png") -130px 0 no-repeat;

}

ul#navbar li#about a.active {

background: #800040 url("bg_navbar.png") -260px 0 no-repeat;

}

/* Services section */

ul#navbar li#services {

background: #800040 url("bg_navbar.png") 0 -100px no-repeat;

}

ul#navbar li:hover#services {

background: #800040 url("bg_navbar.png") -130px -100px no-repeat;

}

ul#navbar li#services a.active {

background: #800040 url("bg_navbar.png") -260px -100px no-repeat;

}

/* Products section */

ul#navbar li#products {

background: #800040 url("bg_navbar.png") 0 -200px no-repeat;

}

ul#navbar li:hover#products {

background: #800040 url("bg_navbar.png") -130px -200px no-repeat;

}

ul#navbar li#products a.active {

background: #800040 url("bg_navbar.png") -260px -200px no-repeat;

}

/* Articles section */

ul#navbar li#articles {

background: #800040 url("bg_navbar.png") 0 -300px no-repeat;

}

ul#navbar li:hover#articles {

background: #800040 url("bg_navbar.png") -130px -300px no-repeat;

}

ul#navbar li#articles a.active {

background: #800040 url("bg_navbar.png") -260px -300px no-repeat;

}

/* Blog section */

ul#navbar li#blog {

background: #800040 url("bg_navbar.png") 0 -400px no-repeat;

}

ul#navbar li:hover#blog {

background: #800040 url("bg_navbar.png") -130px -400px no-repeat;

}

ul#navbar li#blog a.active {

background: #800040 url("bg_navbar.png") -260px -400px no-repeat;

}

/* Contact section */

ul#navbar li#contact {

background: #800040 url("bg_navbar.png") 0 -500px no-repeat;

}

ul#navbar li:hover#contact {

background: #800040 url("bg_navbar.png") -130px -500px no-repeat;

}

ul#navbar li#contact a.active {

background: #800040 url("bg_navbar.png") -260px -500px no-repeat;

}

</style>

</head>

<body>

<h1>Stylish navigation bar using CSS sprites</h1>

<li id="about"><a href="#" class="active">About Us</a></li>

<li id="services"><a href="#">Services</a></li>

<li id="products"><a href="#">Products</a></li>

<li id="articles"><a href="#">Articles</a></li>

<li id="contact"><a href="#">Contact</a></li>

</ul>

</div>

<h2>Main content section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

There you have it. A little bit of editing work in Photoshop (or the image editor of your choice) along with a pinch of CSS and clean, uncluttered markup make it possible to build a multi-state link bar, which can be used in several web sites with minor modifications. Naturally, this example would be incomplete if I don’t show you the output that it generates, so here it is.

In addition, CSS sprites are so flexible that it’s feasible to use the same markup of the previous web page to create an entirely different design. To demonstrate this, in the segment to come I’ll be defining the header section of a blog website, which will be the foundation for a brand new CSS sprite-based navigation bar.

But keep in mind that this is a work in progress, so for the moment I’ll be focused on constructing the header. Therefore, to learn the details of this process, click on the link below and read the next section.

Next: Building the header section of a sample blog site >>