ZorNet.Ru — сайт для вебмастера » HTML и CSS » Рейтинг в виде 5 звезд на чистом CSS

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

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

Теперь нам не нужно выставлять под заданную категорию, а выбрать рабочий каталог и расположить его в низу или вверх, вообщем там где будет смотреться органично по своей стилистике. Но и безусловно нести ту информацию, что оставляет пользователь, здесь не скинуть не прибавить, а значит оценка будет реально оставлена теми, кто пользовался тем или иным материалом. Разве только поставить под операторы, чтоб могли наблюдать пользователи, а гости его не могли видеть.

Приступаем к установке:

По месту где хотим видеть рейтинг в виде 5-ти звезд.

HTML

Код
<div class="svezdnu-reyting">
  <div class="koalisea-pedemun">
  <!-- по умолчанию 0 -->
  <input name="fst" value="0" type="radio" disabled checked />
   
  <!-- рейтинг 1 -->  
  <label for="fst-1">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
  </label>
  <input name="fst" id="fst-1" value="1" type="radio" />
   
  <!-- рейтинг 2 -->  
  <label for="fst-2">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
  </label>
  <input name="fst" id="fst-2" value="2" type="radio" />
   
  <!-- рейтинг 3 -->  
  <label for="fst-3">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
  </label>
  <input name="fst" id="fst-3" value="3" type="radio" />
   
  <!-- рейтинг 4 -->  
  <label for="fst-4">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
  </label>
  <input name="fst" id="fst-4" value="4" type="radio" />
   
  <!-- рейтинг 5 -->  
  <label for="fst-5">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
  </label>
  <input name="fst" id="fst-5" value="5" type="radio" />
  </div>
</div>

CSS

Код
.svezdnu-reyting {
  text-align: center;
}
.svezdnu-reyting .koalisea-pedemun {
  display: inline-flex;
}
.svezdnu-reyting input {
  position: absolute;
  left: -9999px;
}
.svezdnu-reyting label {
  margin: 0;
  cursor: pointer;
}
.svezdnu-reyting label svg {
  margin: 2px;
  height: 40px;
  width: 40px;
  fill: #337AB7;
  transition: fill 0.3s;
}
.svezdnu-reyting input:checked ~ label svg {
  fill: #BFE2FF;
}
.svezdnu-reyting .koalisea-pedemun:hover label svg {
  fill: #337AB7;
}
.svezdnu-reyting .koalisea-pedemun input:hover ~ label svg {
  fill: #BFE2FF;
}

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

Источник: atuin.ru
2022-06-02 Просмотров: 277 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar