Now it's time to remove the temporary properties and beautify the chart a bit.
There are many ways by which we can further beautify what we've done so far and make it look even better. First of all, we can use a custom font for both labels and bar values; next, we can add rounded corners and shadows. Finally, we can use gradients.
On the subject of gradients, we can implement a technique similar to the one we used in Chapter 2, Shiny Buttons, where we used gradients to handle highlights and shadows, setting the background-color property to the color of the bar.
Moving forward, we will choose a custom font, set some inset shadows, specify a border-radius property, and then define a gradient that goes from transparent to a solid color; here's the required CSS:
@import url(http://fonts.googleapis.com/css?family=Chivo);
@import "compass/css3/images";
.value:after, *[data-bar]:before{
font-family: 'Chivo', sans-serif;
}
.value{
background-image: -ms-linear-gradient...