HTML and CSS Reference
In-Depth Information
position
:
relative
;
text-shadow
:
rgba(255, 255, 255, 0.8) 0 1px 0
;
width
:
40px
;
z-index
:
20
;
-webkit-box-shadow
:
rgba(0, 0, 0, 0.6) 0 1px 4px
;
box-shadow
:
rgba(0, 0, 0, 0.6) 0 1px 4px
;
}
.bar:hover span
{
display
:
block
;
margin-top
:
-25px
;
}
First, the pop-up is hidden from view via
display:none
. Then, when a
.bar
element is
hovered over, we've set
display:block
to bring it into view, and set a negative
margin-top
to make it appear above each bar.
The
text-shadow
,
rgba
and
box-shadow
properties are currently supported by most modern
browsers as is. Of these modern browsers, only Safari requires a vendor prefix (
-webkit-
) to
make
box-shadow
work. Note that these properties are simply enhancements to our graph
and aren't required to understand it. Our baseline of Internet Explorer 8 simply ignores them.
Our final step in bringing everything together is to color code each bar:
.fig0
{
background
:
#747474
url(../images/bar-01-bg.gif)
0 0 repeat-y
;
}
.fig1
{
background
:
#65c2e8
url(../images/bar-02-bg.gif)
0 0 repeat-y
;
}
.fig2
{
background
:
#eea151
url(../images/bar-03-bg.gif)
0 0 repeat-y
;
}