Рейтинг на CSS

Не так давно пришлось заняться реализацией возможности оставлять отзывы с выставлением оценки. Своего рода рейтинг. Расскажу как это можно сделать легко, красиво, функционально.

Что нам потребуется? Две картинки (пустая звезда и заполненная) и немного CSS. А теперь, расскажу немного о функциональности. Данный пример позволяет реализовать не только 5 бальную систему оценок, но и 7, 10, 20, и даже 100. Данный пример удобно использовать с каким нибудь динамическим языком программирования, например PHP. Для начала нам понадобится html-страничка со следующим кодом.

<!DOCTYPE html>
<html>
<head>
<title>RateThis</title>
</head>
<body>
<div class="testimonial-rating">
    <div class="testimonial-rating-stars">
        <div class="testimonial-realrating" style="width:85%;"></div>
    </div>
    <div class="testimonial-numerical-rating">4.25 / 5</div>
</div>
</body>
</html>

Структура есть. Перейдем к стилям.

.testimonial-rating {
 width:200px;
 height:24px;
 line-height: 24px;
}
.testimonial-rating-stars {
 background:url("img/star_empty.png") repeat-x;
 width:120px; /* Ширина звезды * желаемое число звезд */
 height:24px; /* Высота звезды */
 float:left;
}
.testimonial-realrating {
 background:url("img/star.png") repeat-x;
 height:24px; /* Высота звезды */
}
.testimonial-numerical-rating {
 width:70px;
 padding-left:10px;
 float:right;
 font-size: 14px;
 text-align: left;
}

О том как подключить css-стили Вы можете прочитать во второй лекции «CSS с нуля».  Вот в принципе и все. Любезно предоставляю Вам исходники и демо.

Stas Kuryan

Web developer. Перфекционист в написании кода.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *