Home arrow Style Sheets arrow Creating an Artistic Blog Header with CSS Sprites

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
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
March 04, 2010
  1. · Creating an Artistic Blog Header with CSS Sprites
  2. · Review: building a stylish navigation bar with CSS sprites
  3. · Building the header section of a sample blog site
  4. · Spicing up the web page

print this article

Creating an Artistic Blog Header with CSS Sprites
(Page 1 of 4 )

If you think that building engaging navigation bars using CSS sprites is a hard-to-master process that can be tackled only by seasoned web designers with vast experience, then this group of articles will hopefully change your mind.

Welcome to the fourth part of a series on building CSS sprite-based navigation bars. With numerous code samples and complementary images, this series shows you in a step-by-step fashion how to develop a pair of eye-catching links bars that take advantage of the functionality provided by CSS sprites to decorate the different states of their sections.

And now that you've been introduced to the main subject of this series, it’s time to briefly recapitulate the topics that were covered in the last article. So, as you’ll possible recall, in that tutorial I finished constructing a stylish navigation bar that used only a single background image to define the visual presentation of its building elements, thanks to the clever manipulation of the image’s X and Y coordinates.

Quite possibly the most challenging facet of the whole development process was to create the background image, as it was designed to contain the “normal,” “hover” and “active” states of the different sections that made up the bar. the effort was really worthwhile, however, since it helped to sharpen my limited graphic design skills, which is a great bonus, trust me.

However, one of the strongest advantages of CSS sprites is their inherent flexibility, which makes them suitable for use in a diversity of web projects. Taking this into consideration, in the next few lines I’ll be demonstrating how to utilize CSS sprites to build the navigation mechanism of a fictional blog, which will have a more artistic and informal look.

Now, it’s time to start creating the header section of this sample personal blog. Let’s go!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials