Creating an Artistic Blog Header with CSS Sprites
(Page 1 of 4 )
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.
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!
Next: Review: building a stylish navigation bar with CSS sprites >>
More Style Sheets Articles
More By Alejandro Gervasio
