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

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

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

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

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

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

HTML

Код

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

02 Июня 2022 Просмотров: 684 Комментариев: (0)

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

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

Kosten

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