ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementSLinks are automatically presented inline, so there’s little need to add CSS just to make them look organized
in a horizontal navigation bar. If you’ve wrapped the links in
declaration in Listing 4-4 to your stylesheet.
Listing 4-4. CSS to Create a Horizontal Navigation Bar from an HTML5 Navigational Structure
nav li { display: inline; }
Now that you have established the basic markup for the most common site navigation formats, you can
move on to enhancing them with CSS3.
A Simple Navigation Bar Enhanced with CSS3
Let’s take the simplest possible markup for navigation from Listing 1-1 and place a background-image behind the
navigation bar. You’ll visually format the text so that it can still be read by adding a text-shadow and a hover
effect, as in Listing 4-5.
Listing 4-5. CSS to Create a Horizontal Navigation Bar from an HTML5 Navigational Structure
nav { background: url(images/clouds.jpg) no-repeat; padding: 1em 0; }
nav a { text-decoration: none; color: #fff; padding: 1em;
font-family: Futura, Arial, sans-serif;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6); }
nav a:hover { background: rgba(0, 0, 0, 0.7); }
Then you’ll add a simple transition to fade in the background behind a hovered link over time, by adjusting
the nav a selector in Listing 4-6.
Listing 4-6. Using CSS3 to Introduce a Transition Effect to a Link
nav a { text-decoration: none; color: #fff; padding: 1em;
font-family: Futura, Arial, sans-serif;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
-webkit-transition: background .85s ease-in-out;
-moz-transition: background .85s ease-in-out;
-o-transition: background .85s ease-in-out;
transition: background .85s ease-in-out;
}
Finally, a little bit of a safety check: anytime you place an image in the background of an element you should
also set a background-color that represents the primary hue of the image, just in case the picture does not
load. Modifying the nav declaration as shown in Listing 4-7 ensures that the linked text will be legible under all
circumstances.
Listing 4-7. Creating a CSS Background Color As a Fallback to an Image
nav { background: url(images/clouds.jpg) #007 no-repeat; padding: 1em 0; }
You can also apply a different appearance to links that the user has previously visited by using
nav a:visited as a selector. As shown in Listing 4-8, you can even create a different-colored transition when
hovering over such links.