Star rating with css

Содержание

Star rating на CSS со шрифтовыми иконками от font-awesome
HTML-разметка
CSS-стили
30+ CSS Star Rating Examples
Pure CSS Star Rating Widget
Author
Link
Made With
About The Code
CSS Star Ratings with Radio Buttons
Author
Link
Made With
About The Code
Angular.js Star Rating Design
Author
Link
Made With
About The Code
Percentage Based Star Ratings
Author
Link
Made With
About The Code
Rating Stars with simple jQuery
Author
Link
Made With
About The Code
Book Store UI with Star Rating
Author
Link
Made With
About The Code
Bootstrap Star Rating
Author
Link
Made With
About The Code
Movie Review Rating Widget
Author
Link
Made With
About The Code
21 Best Free CSS Star Ratings In 2023 | Techknowprime
1. Rate Star Buttons (Pure CSS)
2. How Are You?
3. Pure CSS Star Rating
4. Flat CSS3 Rating System
5. Pure CSS Star Rating
6. Full CSS3 Only Colorful Star Ratings
7. Simple Star Rating
8. Star Rating
9. Rating System (CSS Only)
10. Pure CSS Star Rating Widget
11. Emoticon Star Rating
12. Pure CSS 5-Star Rating
13. CSS Star Rating System With SVG
14. Star Rating For Email
15. CSS Unicode Star Rating
16. Stars
17. Pure CSS Rating Via CSS
18. Pure CSS Star Ratings
19. CSS-Only Star Rating
20. Star Rating In CSS
21. Star Rating In Pure CSS

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 в котором легко изменять размеры и цвет звездочек.

Источник

30+ CSS Star Rating Examples

Many businesses nowadays use rating systems to take feedback from the user about their product or service. Rating systems are a must for e-commerce companies. It is an industry-standard. The most user-friendly rating design is star rating which allows users to select amount of stars depicting the value of the service.

Rating widgets can be designed in many unique ways but they must be user-friendly and simple to use. You can also make it interactive to the user with animations and transitions.

Here is a list of beautiful rating UI design which you can implement in your web development project or you can even take ideas from the given examples and make your own.

Author

Link

Made With

About The Code

It is a simple star rating widget design that is made only using HTML and CSS. Users can hover over the stars and then select the star according to their choice. It gives a preview of the hover of the stars.

CSS Star Ratings with Radio Buttons

Author

Link

Made With

About The Code

Simple star rating widget with hover animation and default selected ratings.

Angular.js Star Rating Design

Author

Link

Made With

HTML / SCSS / Js (Angular js)

About The Code

This rating widget is created with Angular.js and does the basic job.

Percentage Based Star Ratings

Author

Link

Made With

About The Code

Star Rating created using Markdown and Less. You can change value of percentage to manipulate stars.

Rating Stars with simple jQuery

Author

Link

Made With

About The Code

Rating Widget created with jQuery. Simple design implemented in the widget.

Book Store UI with Star Rating

See the Pen Book Store UI by Aysenur Turk (@TurkAysenur) on CodePen.

Author

Link

Made With

About The Code

This entire book store UI with rating system is created using HTML and SCSS.

Bootstrap Star Rating

Author

Link

Made With

About The Code

Simple Bootstrap star rating widget design.

See the Pen Movie Card by Andre Madarang (@drehimself) on CodePen.

Author

Link

Made With

About The Code

Rating with movie card UI.

Источник

21 Best Free CSS Star Ratings In 2023 | Techknowprime

If you’re looking for the perfect way to put a creative CSS star ratings on your site then you’re at the right place.

While you’re at it, why not add a sleek look to an interesting look? Today we are going to try to create a list of the best CSS star ratings with animated, simple, elegant and more options.

Below is a link to each demo and code piece. Whether you want to start with your own design or you are looking for a fully finished star ratings, you have it all.

So undoubtedly let’s get to the list.