Мы назначаем рамку и ширину, а также выбираем режим относительного позиционирования (relative) для размещения метки внутри шкалы. Затем определяется внутреннее заполнение с градиентной заливкой:
html5_meter/stylesheets/style.css
.fill{
background-color: #693;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.37, rgb(14,242,30)),
color-stop(0.69, rgb(41,255,57))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(14,242,30) 37%,
rgb(41,255,57) 69%
);
}
Синтаксис градиентной заливки более подробно рассматривается в главе 8. После стилевого применения заливки необходимо разместить метку для суммы в долларах внутри прямоугольника.
html5_meter/stylesheets/style.css
.label{
position: absolute;
right: 0;
top: 0;
z-index: 1000;
}
HTML5 и CSS3. Веб-разработка по стандартам нового поколения
·
Б. Хоган
