Рейтинг звездочками на css

Рейтинг со звездами на CSS

Если вам понадобилось сделать механизм простановки оценок чему-либо (чаще всего при помощи «звездочек»), то для этого вовсе не обязательно применять JavaScript. Можно все сделать при помощи CSS и семантической разметки.

Первоисточник

На одном замечательном сайте есть целых две статьи про то, как такие рейтинги делать:

Теперь я попытаюсь объяснить все это по-русски, добавив от себя некоторые улучшения (на мой взгляд).

Разметка

Почему вообще применяется список? Это очень удобно с точки зрения доступности (accessibility) — если агент не поддерживает CSS , то наш рейтинг предстанет простым списком ссылок без звездочек, но с возможностью голосования.

В исходном примере автор применяет простой ненумерованный список для создания рейтинга. Мне это показалось не совсем верным с точки зрения семантики: так как элементами списка являются цифры, то и список лучше применять нумерованный, вписав вместо цифр более понятные человеку термины типа «хорошо», «плохо» и т. д.

Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications).

Это означает, что списки определений могут использоваться для пар термин/определение, а также иметь другие применения. То есть мы вполне можем использовать этот элемент, при этом «термином» будет текущий рейтинг, а его определением — список со звездами:

Результат — ничего лишнего и необходимая функциональность.

Сами звезды

Изображение на все три состояния одно, что избавляет нас от необходимости догрузки отдельных картинок.

Теперь пришло время сделать сам рисунок звезд — открываете свой любимый Fireworks/Photoshop и рисуете примерно следующее:

Размер картинки в моем случае 20×60 пикселей, т. е. каждая звездочка имеет размер 20×20. Смысл в том, что необходимо изобразить картинку с тремя состояниями рейтинга (сверху-вниз):

1. Пустое (рейтинг не проставлен)
2. Звезда при выборе
3. Состояние уже проставленного рейтинга

Оформление стилями

Стили буду объяснять по шагам:

Для начала уберем ненужные отступы у нашего списка, а также зададим его ширину и высоту (высота = 20, а ширина — 20×5 = 100). Важно указать правило position:relative , которое потом будет нужно для позиционирования элементов. Кроме того, на подложку мы положили нашу картинку со звездами (по умолчанию — пустая звезда, как если бы мы указали background-position:top ):

Теперь мы выстраиваем наши элементы списка в линию ( float:left ) и также убираем отступы:

Пришло время для ссылок: мы делаем их блочными элементами (чтобы задать ширину и высоту звездочек), прячем текст text-indent:-9999px , а также указываем абсолютное позиционирование и z-index (потом станет ясно зачем):

Теперь начинается самое важное — мы указываем правила для реакции на курсор. При его наведении, наша ссылка заполняется рисунком звездочки (второе состояние из-за указания center ), а также отодвигается влево (к самому краю всего рейтинга). Делается это для того, чтобы активная ссылка (т. е. в состоянии hover ) заполняла собой больше чем положенные ей по умолчанию 20 пикселей — сейчас увидим.

Теперь, чтобы все заработало, нам надо добавить следующие правила для каждого элемента списка (их у нас 5):

dl.star-rating a.star1 < left: 0; >dl.star-rating a.star1:hover < width: 20px; >dl.star-rating a.star2 < left: 20px; >dl.star-rating a.star2:hover < width: 40px; >. 

Из-за указания z-index , наши звездочки позволяют «понижать» рейтинг, опускаясь ниже неактивных ссылок.

Остальные можно понять по аналогии: каждая следующая получает позиционирование, смещенное на 20 пикселей, а при наведении мышки — ширину, равную «значение»?20. Таким образом, каждая ссылка находится на «своем» месте в неактивном состоянии, а при hover’e — «отскакивает» влево, расширяясь при этом на заданную ширину.

Результат можно увидеть здесь: Шаг 2.

Проставленный рейтинг

Чтобы показать уже проставленный рейтинг нам необходимо добавить некоторую разметку к списку (к четвертому пункту):

Избежать указания ширины похоже не удастся. Вычислить ее придется на серверной стороне, умножив количество баллов на ширину звезды — на 20 пикселей.

При этом совершенно не обязательно указывать круглое число. Вы можете проставить, скажем, 3.5 баллов — лишь укажите width:70px .

Кроме того, добавим немного стилей:

Что даст нам «запомненное» состояние рейтинга. Результат.

Небольшой бонус

Чтобы сделать пользование рейтингом еще удобнее, мы можем отображать соответствующие надписи при смене рейтинга. Для этого нам понадобится добавить всего одно правило:

upd. последний код не работает в IE 5/6, поэтому мы его просто от него скрываем. Решить эту проблему можно при помощи обертки в дополнительные теги (а может и еще как-то), а мне этого не хочется. Поэтому пользователи IE просто не увидят поясняющих надписей (hint: вынесите их в аттрибут title у ссылок).

upd2. в комментариях спросили про серверную сторону реализации рейтинга. Один из способов здесь.

Источник

Рейтинг со звездочками на CSS

Для удобства работы с рейтингом звездочки сделаны на radio кнопках с использованием SVG-иконок и на чистом CSS.

Рейтинг на 5 пунктов:

HTML:

CSS:

Рейтинг на 10 пунктов:

HTML:

label для дробных вариантов (половина звезды) имеет класс hsr

CSS:

Если на сайте подключены графические шрифты, такие как FontAwesome, SVG-графику можно заменить на них, уменьшив тем самым HTML-код.

Также можно использовать различные спецсимволы или эмодзи, не забывая о том, что в каждом браузере они показываются по-разному.

Если при смене SVG-звездочек на шрифт не получится изменить CSS, напишите об этом в комментариях, постараюсь помочь.

Смотрите также:

Варианты оформления jQuery UI Slider

Несколько вариантов оформления и добавление различных функций к ползунку диапазонов jQuery UI Slider

Радиокнопки с иконками

Стилизация переключателей radio с использованием иконочных шрифтов или картинок

Фильтр контента по буквам на jQuery

Небольшой скрипт на jQuery реализующий поиск и фильтрацию контента по буквам

Источник

Star rating на CSS со шрифтовыми иконками от font-awesome

Стояла задача добавить стар-рейтинг к форме комментариев для шаблона.

Это должны быть обычные 5 звездочек, при наведении на которые выделяются все звездочки от начала до той, на которую навели и при выборе (клике) такое состояние сохраняется. Также, конечно, нужно обеспечить передачу значения указанного рейтинга при отправке формы.

Решение делал не для конечного проекта, а для шаблона. Поэтому нужно было сделать звездочки максимально гибким для дальнейшей кастомизации. То есть изменения цвета, размера звездочек должно быть максимально легким. Под такую конфигурацию использование спрайта изображений не подходило, поэтому решил использовать шрифтовые иконки. Выбор пал на сервис Font Awesome. Там есть звездочки с названием fa-star-o — звездочка по умолчанию и fa-star — звездочка активная (при наведении и выборе).

Дальше решил подумать, как можно реализовать такую задача минимальными ресурсами, в идеале без использования javascript. В итоге все получилось и, как по мне, такое решение оптимальное для подобной задачи.

Кому лень читать дальше, можете сразу посмотреть результат тут — codepen.

HTML-разметка

Общая идея состоит в том, что мы выводим рейтинг обычными радиокнопками, что бы сохранить передачу данные через форму. Дальше прячем радиокнопки с помощью CSS, а выделять их будем с помощью клика по соседних лейблах, которые ссылаются на радиокнопку атрибутом for. Сами же лейблы мы выводим в виде иконок с сервиса Font Awesome.

В итоге HTML-разметка следующая:

Конечно, не забываем подключить шрифт Font Awesome в начале.

Очень важно сохранять порядок следования элементов input и label, при чем не помещать никаких вложенных элементов внутрь.Такая зависимость от html-разметки негативная, но это та жертва которую я посчитал уместной.

Также очень важно выводить радиокнопки в обратном порядке от 5 до 1.

CSS-стили

Первое, что нужно сделать — это спрятать радиокнопки. В результате у нас остаются только звездочки при нажатия на которые выделяется нужный радиобокс.

Второе — при наведении иконка должна изменятся на активную, при чем измениться должна не только текущая иконка, а и все иконки перед ней!

.star-rating__ico:hover:before, .star-rating__ico:hover ~ .b-star-rating__ico:before,

content: «\f005»; — это код активной иконки стар-рейтинга в шрифте Font Awesome. Иконки в этом шрифте вставляются через псевдоэлемент ::before

Третье — при клике на иконку состояние наведения должно сохраниться, то-есть активными должны быть текущая и соседние звездочки.

Добавляем к этому же правилу еще один селектор:

.star-rating__input:checked ~ .star-rating__ico:before 

В результате главные стили, которые делают основную работу следующие:

.star-rating__input < display: none; >.star-rating__ico:hover:before, .star-rating__ico:hover ~ .star-rating__ico:before, .star-rating__input:checked ~ .star-rating__ico:before

Дальше нужно перевернуть звездочки в другую сторону, так как сестринский селектор выбирает соседей по направлению текста. По умолчанию слева-направо, а нам нужно наоборот.

Для решения этой задачи есть два способа: изменить направления текста для элемента star-rating указав direction: rtl или сделать элемент плавающим по правой стороне. Мне больше по душе второй вариант. Кроме этого сделав элементы внутри .star-rating плавающими мы уберем отступы между звездочками из-за которых пропадает наведение

В общем, дальше уже все обычно. Еще раз ссылка на результат codepen.

В результате у нас полноценный стар-рейтинг со шрифтовыми иконками, написанный только на HTML+СSS в котором легко изменять размеры и цвет звездочек.

Источник

26 CSS Star Ratings

Collection of hand-picked free HTML and CSS star rating code examples. Update of July 2019 collection. 6 new items.

Related Articles

Author

Links

Made with

About a code

Simple Star Rating in CSS

Star rating system using HTML & CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pure CSS Star Rating Widget

Pure CSS star rating widget with HTML and CSS. No JavaScipt.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Simple Star Rating

HTML and CSS simple star rating.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pure CSS Star Ratings

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Star Rating

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pure CSS Rating

Pure CSS rating via CSS custom properties as API.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

5-Star Rating

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Standalone SVG CSS-only Star Rating Component

This is a CSS-only component that dynamically generates each of the SVG icons to be used as background images for each of the stars. For the rating value to be displayed, data-rating-value HTML attribute must be updated and calculated rounding every 0.25 to reflect the proper rating.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Emoticon Star Rating

Emoticon five star rating through Font Awesome in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник