Красивые рейтинги при помощи CSS

Достаточно интересные по виду рейтинги для статей используют на сайте Web Appstorm. Эта система, основанная, естественно, на CSS, использует абсолютное позиционирование и картинку в качестве значения максимального рейтинга.

Как это работает? Да вот так!

HTML-код:

<span class="the_score">8</span>
<img class="ten" src="http://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif" alt="">

CSS-код:

.tabdiv {
position: relative;
width: 100%;
}
.tabdiv .the_score {
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
font-size: 110px;
line-height: 110px;
font-weight: bold;
position: absolute;
top: 8px;
right: 100px;
color: #262626;
text-align: center;
letter-spacing: -17px;
}
.tabdiv .ten {
position: absolute;
top: 58px;
right: 45px;
}

Можно воспользоваться и альтернативой: текущий и максимально возможный рейтинги будут представлены обыкновенным текстом, а резделитель между ними — картинкой.

HTML-код:

<div class="ratingblock">
<span class="rating">8</span>
<span class="max">10</span>
</div>

CSS-код:

.ratingblock{
position: relative;
height: 110px;
margin-top: 30px;
margin-left: 30px;
}
.ratingblock .rating {
font-size: 3.7em;
padding: 0 5px;
}
.ratingblock .max{
display: block;
background: url(sep.gif) no-repeat;
position: absolute;
top: 0; left: 0;
font-size: 1.5em;
width: 50px;
height: 60px;
padding: 40px 0 0 30px;
}

Что еще сказать... Ах да, можете одним глазком взглянуть на демонстрацию.