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 ;
}
Search WWH ::




Custom Search