HTML and CSS Reference
In-Depth Information
Figure 10-12. Setting the display property to block makes the whole link clickable
8. To distinguish between the links, give them a border with harmonious colors. Putting
a lighter color on the top and left, and a darker color on the right and bottom gives
the illusion of embossed buttons. Amend the #nav a style rule like this:
#nav a {
display: block;
padding: 0.5em 15px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
border: 2px solid;
border-color: #606B74 #02060B #02060B #606B74;
9. To make the buttons seem inverted when the mouse is hovering over them, the border
on the top and left needs to be a darker color, and the right and bottom a lighter one:
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
border-color: #142A2F #61797F #61797F #142A2F;
Save the style sheet, and test the navigation menu again. it should now look like
Figure 10-13 .
Figure 10-13. Adding harmonious color borders gives the links an embossed look
Search WWH ::

Custom Search