Defining a Navigation Bar`s Hover State with CSS Sprites
(Page 1 of 4 )
In this penultimate part of the series, I show how to use the previous CSS sprite background image to define the look of a casual, artistic blog navigation bar in its “hover” state. The simple styling process shouldn't give you any major problems when you use this approach to build a navigation bar for your own websites.
Among the diversity of techniques that can be applied nowadays in the development of modern websites, CSS sprites are definitively one of the most popular with many web designers, as they allow you to build with relative ease several interfacing elements, such as navigational bars, interactive HTML forms and so forth by using something as trivial as a single background image.
Even though the logic that stands behind CSS sprites is remarkably simple, the clever manipulation of the background graphic assigned to a given HTML element through its X and Y coordinates permits you to create appealing, highly-responsive graphic interfaces without having to rely on JavaScript.
To demonstrate how useful CSS sprites can be in a real-world project, in the previous installment I started constructing the navigational bar of a sample blog site. The example made use of a background image to define the visual presentation of the “normal,” “hover” and “active” states of its sections, all in one go.
Admittedly, the example links bar in its current version is entirely functional, but the CSS code developed so far was used only to style its “normal” state. This doesn't leverage the full potential of its CSS sprite image. To address this issue, in this penultimate part of the series I’ll be adding to the landing page of this fictional blog site the CSS styles required to define the look of the bar when the mouse is placed over its sections.
Are you ready to learn how this styling process will be accomplished via CSS sprites? Then click on the link below and start reading right now!
Next: Review: using CSS sprites to define the blog navigation bar's normal state >>
More Style Sheets Articles
More By Alejandro Gervasio
