HTML and CSS Reference
In-Depth Information
We can actually create our graph using no images at all, and even animate the bars using
CSS instead of jQuery.
Let's start by removing the background images from our bars, replacing them with the
-webkit-gradient property:
.fig0 {
background : -webkit-gradient(linear, left top, right top, color-stop(0.0,
#747474), color-stop(0.49, #676767), color-stop(0.5, #505050), color-stop(1.0,
#414141)) ;
}
.fig1 {
background : -webkit-gradient(linear, left top, right top, color-stop(0.0,
#65c2e8), color-stop(0.49, #55b3e1), color-stop(0.5, #3ba6dc), color-stop(1.0,
#2794d4)) ;
}
.fig2 {
background : -webkit-gradient(linear, left top, right top, color-stop(0.0,
#eea151), color-stop(0.49, #ea8f44), color-stop(0.5, #e67e28), color-stop(1.0,
#e06818)) ;
}
We can do the same with our little number pop-ups:
.bar span {
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.0,
#fff), color-stop(1.0, #e5e5e5)) ;
}
For more information on Webkit gradients, check out the Surfin' Safar i blog.
16
Continuing with the pop-ups, let's introduce -webkit-transition . CSS transitions are
remarkably easy to use and understand. When the browser detects a change in an element's
property (height, width, color, opacity, etc.), it will transition to the new property.
Search WWH ::




Custom Search