HTML5 and CSS3, Second Edition

5 max = meter.attr("max");

If this code is a little confusing, check out Appendix 2, jQuery Primer, on page

263 , for a short overview of basic jQuery.

With the JavaScript in place, we can turn our attention to styling the meter.

html5_meter/stylesheets/style.css

.meter{

border:1px solid#000;

display:block;

position:relative;

width:280px;

}

We give it a border and a width, and we set its positioning to relative so we can

then easily position the label inside of it. Then we define the inner fill with a

gradient fill, like this:

html5_meter/stylesheets/style.css

.fill{

background-color:#693;

background-image:-webkit-gradient(

linear,

leftbottom,

lefttop,

color-stop(0.37,rgb(14,242,30)),

color-stop(0.69,rgb(41,255,57))

);

background-image:-moz-linear-gradient(

centerbottom,

rgb(14,242,30)37%,

rgb(41,255,57)69%

);

}

Chapter 2. New Structural Tags and Attributes • 28

Download from Wow! eBook <www.wowebook.com> report erratum • discuss