Как сделать рейтинг звездочками css
Перейти к содержимому

Как сделать рейтинг звездочками css

  • автор:

Стилизация рейтинга товара звездочками на HTML и CSS

В данной статье речь пойдет о том, как стилизировать выбор оценки с помощью звезд рейтинга.
1. HTML Прописываем 5 инпутов с типом радио и лейблы к ним. Располагаем их в последовательности, чтобы за каждым input шел его label.
Значения input в DOM дереве должно идти в порядке убывания (! важно). Пример HTML:

2. CSS Весь блок (.rating_block) делаем высотой кратной 5 и шириной = высота * 5. Например: выста 25px, и ширина 125px. Инпуты скрываем через display: none;. Лейблы делаем шириной и высотой 25px, и даем им свойство float: right; (! важно). Таким образом у нас слева будет самый нижний лейбл из DOM дерева который с самым маленьким рейтингом. Изготовляем изображение звездочек рейтинга. Лучше всего если это будет вертикальное изображение с двумя звездочками (вверху неактивная, внизу активная). Размеры должны быть: ширина = ширина лейбла, высота = высота лейбла * 2. В примере это 25px на 50px. Пример CSS:

.rating_block < width: 125px; height: 25px; >.rating_block input[type=»radio»] < display: none; >.label_rating < float: right; display: block; width: 25px; height: 25px; background: url(rating.png) no-repeat 50% 0; cursor: pointer; >/*Пишем правила смены положения background-а*/ .rating_block .label_rating:hover, /*Правило для ховера на текущий лейбл*/ .rating_block .label_rating:hover ~ .label_rating, /*Правило для всех следующих лейблов по DOM дереву*/ .rating_block input[type=»radio»]:checked ~ .label_rating /*Правило для всех следующих лейблов после выбранного инпута, чтобы звездочки как бы зафиксировались*/

Поделиться:

Верстка рейтинга в виде звезд

Вёрстка контролов оценки и показа рейтинга без изображений и JS.

Выбор рейтинга в форме

Radio button скрыт, но играет двойную роль – отправляет оценку с формой и если добавить checked выделит нужную звезду и все предшествующие ей.

.rating-area < overflow: hidden; width: 265px; margin: 0 auto; >.rating-area:not(:checked) > input < display: none; >.rating-area:not(:checked) > label < float: right; width: 42px; padding: 0; cursor: pointer; font-size: 32px; line-height: 32px; color: lightgrey; text-shadow: 1px 1px #bbb; >.rating-area:not(:checked) > label:before < content: '★'; >.rating-area > input:checked ~ label < color: gold; text-shadow: 1px 1px #c60; >.rating-area:not(:checked) > label:hover, .rating-area:not(:checked) > label:hover ~ label < color: gold; >.rating-area > input:checked + label:hover, .rating-area > input:checked + label:hover ~ label, .rating-area > input:checked ~ label:hover, .rating-area > input:checked ~ label:hover ~ label, .rating-area > label:hover ~ input:checked ~ label < color: gold; text-shadow: 1px 1px goldenrod; >.rate-area > label:active

SCSS | CSS | Звездочный рейтинг

Увидел гугл рейтинг и захотел поставить себе на сайт. Но возникла проблема. У меня не получается сделать так, чтобы при наведении на i.icon-star звездочки ДО неё загорались. Если делать просто .icon-star:nth-child(-n+4), то все ок, но не при наведении.

$(document).ready(function() < $('.bar span').hide(); $('#bar-five').animate(< width: '75%'>, 1000); $('#bar-four').animate(< width: '35%'>, 1000); $('#bar-three').animate(< width: '20%'>, 1000); $('#bar-two').animate(< width: '15%'>, 1000); $('#bar-one').animate(< width: '30%'>, 1000); setTimeout(function() < $('.bar span').fadeIn('slow'); >, 1000); >);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400); @import url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); body < font-family: 'Roboto', Helvetica; color: #737373; font-weight: 300; >.container < width: 400px; margin: 0 auto; margin-top: 3em; background-color: #EFEFEF; padding: 4px; >.inner < padding: 1em; background-color: white; overflow: hidden; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; >.rating < float: left; width: 45%; margin-right: 5%; text-align: center; >.rating-num < color: #333333; font-size: 72px; font-weight: 100; line-height: 1em; >.rating-stars < font-size: 20px; color: #E3E3E3; margin-bottom: .5em; >.rating-stars > span.active < color: #737373; >.rating-stars > .icon-star:hover < cursor: pointer; color: #ffc107; >.rating-stars > .icon-star:hover:nth-child(-n+1) < cursor: pointer; color: #ffc107; >.rating-stars > .icon-star:hover:nth-child(-n+2) < cursor: pointer; color: #ffc107; >.rating-stars > .icon-star:hover:nth-child(-n+3) < cursor: pointer; color: #ffc107; >.rating-stars > .icon-star:hover:nth-child(-n+4) < cursor: pointer; color: #ffc107; >.rating-stars > .icon-star:hover:nth-child(-n+5) < cursor: pointer; color: #ffc107; >.rating-users < font-size: 14px; >.histo < float: left; width: 50%; font-size: 13px; >.histo-star < float: left; padding: 3px; >.histo-rate < width: 100%; display: block; clear: both; >.bar-block < margin-left: 5px; color: black; display: block; float: left; width: 75%; position: relative; >.bar < padding: 4px; display: block; >#bar-five < width: 0; background-color: #9FC05A; >#bar-four < width: 0; background-color: #ADD633; >#bar-three < width: 0; background-color: #FFD834; >#bar-two < width: 0; background-color: #FFB234; >#bar-one < width: 0; background-color: #FF8B5A; >/*# sourceMappingURL=rating.css.map */
 
4.0
1,014,004 total
5 566,784 
4 171,298 
3 94,940 
2 44,525 
1 136,457 

Верстка рейтингов

Уже наверное встречал в сети блоки с оценкой чего либо (фильма, мобильного телефона, статьи и т.п.), что-то вроде этого:

пример рейтинга товара

Рано или поздно каждый кодер сталкивается с такой задачей. И решить ее можно по разному.

Показ рейтинга

Способ 1 — дедовский метод

Вырезаем две картинки: одна для пустого значения (в нашем случае это звездочка), другая для заполненного. Выводим на сайт пять картинок, сколько из них нужно пустых, а сколько заполненных определяет алгоритм программиста:

 

Какие же тут недостатки?

  1. для небольшого блока потребовалась куча строк — не лучшим образом скажется на читаемости кода, поисковой и сео оптимизациях;
  2. потребуется две отдельные картинки — снова же скорость загрузки страницы, нагрузка на сервер;
  3. использование картинок (тег ) для оформления, соответственно написать что-то вразумительное в alt нет возможности, а google предупреждал, что лучше так не делать;
  4. программисту, который имеет готовое число рейтинга, все равно придется дополнительно думать и писать код для корректного вывода этого самого рейтинга на сайте.

И на мой взгляд самый большой недостаток — практически нереальность вывода рейтинга со значением не кратным 1/N, где N — к-во возможных оценок в рейтинге (в нашем примере 5). Например, попробуй при такой верстке вывести значение равное 64%. На сайте должно получится что-то вроде такого:

пример рейтинга с неудобным значением

Способ 2 — достойный

Этот вариант решает все вышеперечисленные проблемы. Алгоритм для нашего примера:

  1. делаем контейнер, задаем ему фон с одной пустой звездой, которая размножается по оси x (background-repeat: repeat-x);
  2. в него вкладываем блок, с фоном полной звезды (и тут фон множиться по оси x). По умолчанию этот блок имеет длину (width) равную 0;
  3. в HTML коде, с помощью атрибута style, устанавливаем длину вложенного блока равную значения рейтинга.
.productRate < background: url(path-to/empty-star.png); width: 150px; height: 32px; >.productRate div < background: url(path-to/full-star.png); width: 0; height: 100%; >

Разницу трудно не заметить. И поверь, программист тебе будет благодарен за такой код.

Заметка

Для уменьшения числа отдельных картинок тут смело можно применять технику спрайтов.

Показ рейтинга с возможностью голосования

Часто можно встретить сайты, где рейтинг не просто показан, а можно, кликнув по нему, поставить свою оценку. Обычно при наведении курсора мыши на подобный блок, оценка, выбранная тобой, как-то выделяется от остальных позиций рейтинга. В нашем примере будут все те же звезды, добавится еще третья — ярко желтая, для подсветки выбранной оценки.

CSS метод

Для этого используем следующий HTML код

ul < width: 150px; height: 30px; position: relative; background: url(path-to/stars.png); >li < float: left; height: 30px; >li span < display: block; width: 30px; height: 30px; text-indent: -9999px; position: absolute; text-decoration: none; z-index: 10; cursor: pointer; >li span:hover < background: url(path-to/stars.png) left center; left: 0; z-index: 2; >span.star1 < left: 0; >span.star1:hover < width: 30px; >span.star2 < left: 30px; >span.star2:hover < width: 60px; >span.star3 < left: 60px; >span.star3:hover < width: 90px; >span.star4 < left: 90px; >span.star4:hover < width: 120px; >span.star5 < left: 120px; >span.star5:hover < width: 150px; >li.current < background: url(path-to/stars.png) left bottom; z-index: 1; >ul>li span:hover

stars.png в данном примере выглядит так:

Демонстрация. Прелести данного метода:

  • подсветка указанной оценки происходит без применения скриптов (все работает за счет псевдокласса hover)
  • для программиста тоже все прозрачно — чтобы вывести нужный рейтинг на сайт, нужно всего лишь задать нужную ширину первому элементу списка (с классом current)
  • код в целом можно назвать семантичным
  • для IE6 придется добавить скрипт эмуляции hover, т.к. этот браузер hover понимает только для ссылок
  • много кода

Хотя тут и сделан рейтинг без использования Javascript, очень высока вероятность, что все же скрипты тут будут применяться для отправки данных на сервер, например в паре с AJAX. Я бы так и делал. Поэтому в своей работе я бы такой рейтинг полностью построил на Javascript, тем самым по максимуму упростил HTML код.

Метод на Javascript

За основу берем компактный метод показа рейтингов, рассмотренный выше и «оживляем» его с помощью Javascript:

#productRate < background: url(path-to/stars.png); width: 150px; height: 32px; position: relative; >#productRate div < background: url(path-to/stars.png) left bottom; width: 0; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; cursor: pointer; >#productRate span < display: block; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: url(path-to/stars.png) left center; width: 0; cursor: pointer; >

Скрипт использует jQuery