HTML and CSS Reference
In-Depth Information
◗
3.
At the bottom of the file, add the following style rule to change the background
color of the hyperlinks in the vertical navigation list in response to the hover
event:
nav.verticalNAV a:hover {
background-color: rgb(105, 96, 87);
background-color: rgba(255, 255, 255, 0.3);
}
Figure 4-39 highlights the new code in the file.
Figure 4-39
Adding a border to the hyperlinks
displays each hyperlink as
a block element
with a
light yellow bottom border
changes the background
color to medium gray or a
semi-transparent white
during the hover event
◗
4.
Save your changes to the file and reload
cycle.htm
in your Web browser. Verify
that the hyperlinks now display a bottom border with the hover effect shown ear-
lier in Figure 4-37.
Creating Rounded Corners
Dan thinks the current layout is too boxy and would like to soften the design by adding
curves to some of the page elements. Specifi cally, he would like you to add rounded cor-
ners to the president's message box. Rounded corners can be applied to any of the four
corners of a block element using the styles
border-top-left-radius:
radius
;
border-top-right-radius:
radius
;
border-bottom-right-radius:
radius
;
border-bottom-left-radius:
radius
;
border-radius:
top-left top-right bottom-right bottom-left
;
where
radius
is the radius of the rounded corner in one of the CSS units of measure-
ment and
top-left
,
top-right
,
bottom-right
, and
bottom-left
are the radii of
the individual corners. The radii are equal to the radii of hypothetical circles placed
at the corners of the box with the arcs of the circles defi ning the rounded corners (see
Figure 4-40).
