Главная » Языки программирования

Блок оценки в html

Содержание
  1. Star rating на CSS со шрифтовыми иконками от font-awesome
  2. HTML-разметка
  3. CSS-стили
  4. CSS Star Ratings
  5. Related Articles
  6. Author
  7. Links
  8. Made with
  9. About a code
  10. Star Ratings
  11. Author
  12. Links
  13. Made with
  14. About a code
  15. CSS 3D Star Rating
  16. Author
  17. Links
  18. Made with
  19. About a code
  20. Pure CSS Star Rating
  21. Author
  22. Links
  23. Made with
  24. About a code
  25. Star Ratings
  26. Author
  27. Links
  28. Made with
  29. About a code
  30. Pure CSS Star Rating
  31. Author
  32. Links
  33. Made with
  34. About a code
  35. Star Rating in Pure CSS
  36. Author
  37. Links
  38. Made with
  39. About a code
  40. Bubble UI: Star Rating
  41. Author
  42. Links
  43. Made with
  44. About a code
  45. Rating & Counter — Pure CSS
  46. Author
  47. Links
  48. Made with
  49. About a code
  50. Feedback Reactions (Dark Version)
  51. Author
  52. Links
  53. Made with
  54. About a code
  55. Star Rating
  56. Author
  57. Links
  58. Made with
  59. About a code
  60. Pure CSS Star Rating Widget
  61. Author
  62. Links
  63. Made with
  64. About the code
  65. Simple Star Rating
  66. Author
  67. Links
  68. Made with
  69. About the code
  70. Pure CSS Star Ratings
  71. Author
  72. Links
  73. Made with
  74. About the code
  75. Star Rating
  76. Author
  77. Links
  78. Made with
  79. About a code
  80. Pure CSS Rating Card
  81. Author
  82. Links
  83. Made with
  84. About the code
  85. 5-Star Rating
  86. Author
  87. Links
  88. Made with
  89. About the code
  90. Standalone SVG CSS-only Star Rating Component
  91. Author
  92. Links
  93. Made with
  94. About the code
  95. Emoticon Star Rating
  96. Author
  97. Как сделать возможность оценивания на CSS.
  98. Описание
  99. Установка и настройка
  100. Названия анимаций
  101. Заключение
  102. Комментарии ( 1 ):

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

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

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

Читайте также:  Java reflection get class implements interface

Решение делал не для конечного проекта, а для шаблона. Поэтому нужно было сделать звездочки максимально гибким для дальнейшей кастомизации. То есть изменения цвета, размера звездочек должно быть максимально легким. Под такую конфигурацию использование спрайта изображений не подходило, поэтому решил использовать шрифтовые иконки. Выбор пал на сервис 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 в котором легко изменять размеры и цвет звездочек.

Источник

CSS Star Ratings

Welcome to our collection of CSS Star Ratings! Here, you’ll find a curated selection of free HTML and CSS star rating code examples sourced from platforms like CodePen, GitHub, and other reliable resources. This collection serves as an update to our February 2021 collection, featuring twelve new star rating items.

Whether you’re looking to add a visually appealing rating system to your website or enhance user feedback, you’ll discover a range of creative and customizable examples.

Author

Made with

About a code

Star Ratings

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

Author

Made with

About a code

CSS 3D Star Rating

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

Author

Made with

About a code

Pure CSS Star Rating

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

Star Ratings

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

Pure CSS Star Rating

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

Author

Made with

About a code

Star Rating in Pure CSS

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

Author

Made with

About a code

Bubble UI: Star Rating

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

Author

Made with

About a code

Rating & Counter — Pure CSS

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

Author

Made with

About a code

Feedback Reactions (Dark Version)

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

Author

Made with

About a code

Star Rating

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

Author

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

Made with

About the code

Simple Star Rating

HTML and CSS simple star rating.

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

Author

Made with

About the code

Pure CSS Star Ratings

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Star Rating

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

Author

Made with

About a code

Pure CSS Rating Card

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

Demo image: 5-Star Rating

Author

Made with

About the code

5-Star Rating

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

Demo image: Standalone SVG CSS-only Star Rating Component

Author

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

Demo image: Emoticon Star Rating

Author

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

Demo image: Rate Star Buttons

Author

Источник

Как сделать возможность оценивания на CSS.

Как сделать возможность оценивания на CSS.

Всем привет! В этой статье я хочу рассказать вам про то, как быстро сделать на сайте пятизвездочный рейтинг с красивыми анимациями на CSS.

Описание

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

Для начала вы можете посмотреть демонстрацию. Там вы найдете рейтинг с базовой анимацией, а, точнее, с ее отсутствием, дальше идут такие анимации, как «слот машина», «увеличивающаяся звезда», «увеличивающаяся и вращающаяся звезда», «уменьшающаяся звезда», «рейтинг с галочкой» 🙂 Как вы можете видеть, анимации интересные, красивые, а главное – качественные. Такую штуку будет не стыдно подключить к себе на сайт! Кстати, давайте как раз и поговорим о том, как это все установить.

Установка и настройка

Подключение возможности рейтинга к себе на сайт у вас не составит никакой сложности. Для начала создайте такую структуру папок:

  • index.html
  • /css
    • css file with chosen rating (eg.: starability-fade.min.css)
    • icons.png
    • [email protected]
    • icons-checkmark.png (include this file if you are going to use checkmark rating)
    • [email protected](include this file if you are going to use checkmark rating)

    Все необходимые исходники вы можете найти на GitHub.

    Если ваша структура отличается, не забудьте указать правильные пути к файлам.

    Теперь скопируйте HTML код:

    Добавьте таблицу стилей с названием анимации

    В классе у fieldset укажите нужное название выбранной вами анимации

    Подключите файлы с иконками.

    Названия анимаций

    • starability-basic
    • starability-slot
    • starability-grow
    • starability-growRotate
    • starablity-fade
    • starability-checkmark

    Заключение

    Вот и все! Вот так просто вы можете сделать красивую возможность оценивания у себя на сайте!

    Создано 27.05.2016 22:39:07

  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    Она выглядит вот так:
  2. Текстовая ссылка:
    Она выглядит вот так: Как создать свой сайт
  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 1 ):

Можно более подробно рассказать про создание структуры папок для чего нужны папки в CSS, что в них помещать?

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Оцените статью
© 2024 Программирование