Стилизация рейтинга товара звездочками на 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
Как нарисовать фигуру звезды на css?
Подскажите, пожалуйста, можно ли с помощью css нарисовать такую фигуру звезды?
Спасибо!
Отслеживать
Sevastopol’
задан 23 дек 2017 в 10:35
Sevastopol’ Sevastopol’
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
иконка не подойдёт?
23 дек 2017 в 10:37
мне казалось, что вы могли просто не подумать о том, что можно использовать иконки, вот я и написал. если мой комментарий такой лишний, то извините, пожалуйста. к тому же, по идее, ответы должны быть полезны не только автору, но и другим людям, вполне может быть, что им иконка может подойти
23 дек 2017 в 14:34
@LADYX нелогично. В вопросе нет я знаю такие-то способы, но мне нужен именно и только css . Вполне логично как раз предположить, что вы не в курсе, что есть решения без извращений с полигонами.
23 дек 2017 в 15:00
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вариант на css. Данный пример не будет работать в IE и EDGE
* < box-sizing: border-box; >.stars < text-align: center; >.star < display: inline-block; vertical-align: top; width: 20px; height: 20px; background: linear-gradient(to bottom, rgba(197, 196, 196, 1) 0%, rgba(180, 179, 178, 1) 100%); position: relative; >.star:before < content: ''; position: absolute; top: 1px; left: 1px; bottom: 1px; right: 1px; background: linear-gradient(to bottom, rgba(221, 220, 219, 1) 0%, rgba(209, 208, 206, 1) 100%); z-index: 1; >.star, .star:before < -webkit-clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%); clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%); >.star:hover < background: linear-gradient(to bottom, rgba(224, 194, 75, 1) 0%, rgba(207, 125, 0, 1) 100%); >.star:hover:before
Отслеживать
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак
ответ дан 23 дек 2017 в 14:46
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
Как вариант можно воспользоваться этим
Вот тут отличная статья как реализовать то что ты наверное хочешь
А вот тут как это реализованно
.star-rating < font-size: 0; >.star-rating__wrap < display: inline-block; font-size: 1rem; >.star-rating__wrap:after < content: ""; display: table; clear: both; >.star-rating__ico < float: right; padding-left: 2px; cursor: pointer; color: #FFB300; >.star-rating__ico:last-child < padding-left: 0; >.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
Геометрические фигуры на CSS
Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.
Квадрат
#square
Прямоугольник
#rectangle
Круг
#circle
Овал
#oval < width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; >Треугольник вверх
#triangle-up
Треугольник вниз
#triangle-down
Треугольник налево
#triangle-left
Треугольник направо
#triangle-right
Треугольник в левом верхнем углу
#triangle-topleft
Треугольник в правом верхнем углу
#triangle-topright
Треугольник в левом нижнем углу
#triangle-bottomleft
Треугольник в правом нижнем углу
#triangle-bottomright
Параллелограмм
#parallelogram
Трапеция
#trapezoid
Звезда (6-конечная)
#star-six < width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; >#star-six:after
Звезда (5-конечная)
#star-five < margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star-five:before < border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star-five:after
Пятиугольник
#pentagon < position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; >#pentagon:before
Шестиугольник
#hexagon < width: 100px; height: 55px; background: red; position: relative; >#hexagon:before < content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; >#hexagon:after
Восьмиугольник
#octagon < width: 100px; height: 100px; background: red; position: relative; >#octagon:before < content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; >#octagon:after
Сердечко
#heart < position: relative; width: 100px; height: 90px; >#heart:before, #heart:after < position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after
Знак бесконечности
#infinity < position: relative; width: 212px; height: 100px; >#infinity:before, #infinity:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after