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

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

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

Описание

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

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

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

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

  • index.html
  • /css
    • css file with chosen rating (eg.: starability-fade.min.css)
  • /starability-images
    • icons.png
    • icons@2x.png
    • icons-checkmark.png (include this file if you are going to use checkmark rating)
    • icons-checkmar@2x.png (include this file if you are going to use checkmark rating)

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

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

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

<fieldset class="starability-basic">
  <legend>First rating:</legend>
  <input type="radio" id="first-rate5" name="rating" value="5" />
  <label for="first-rate5" title="Amazing">5 stars</label>
  <input type="radio" id="first-rate4" name="rating" value="4" />
  <label for="first-rate4" title="Very good">4 stars</label>
  <input type="radio" id="first-rate3" name="rating" value="3" />
  <label for="first-rate3" title="Average">3 stars</label>
  <input type="radio" id="first-rate2" name="rating" value="2" />
  <label for="first-rate2" title="Not good">2 stars</label>
  <input type="radio" id="first-rate1" name="rating" value="1" />
  <label for="first-rate1" title="Terrible">1 star</label>
</fieldset>

<fieldset class="starability-basic">
  <legend>Second rating:</legend>
  <input type="radio" id="second-rate5" name="rating" value="5" />
  <label for="second-rate5" title="Amazing">5 stars</label>
  <input type="radio" id="second-rate4" name="rating" value="4" />
  <label for="second-rate4" title="Very good">4 stars</label>
  <input type="radio" id="second-rate3" name="rating" value="3" />
  <label for="second-rate3" title="Average">3 stars</label>
  <input type="radio" id="second-rate2" name="rating" value="2" />
  <label for="second-rate2" title="Not good">2 stars</label>
  <input type="radio" id="second-rate1" name="rating" value="1" />
  <label for="second-rate1" title="Terrible">1 star</label>
</fieldset>

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

<head>
  <link rel="stylesheet" type="text/css" href="css/starability-fade.min.css"/>
</head>

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

<fieldset class="starability-fade">

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

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

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

Заключение

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

Всем спасибо за внимание!