Как сделать возможность оценивания на 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
Заключение
Вот и все! Вот так просто вы можете сделать красивую возможность оценивания у себя на сайте!
Всем спасибо за внимание!
-
Создано 27.05.2016 22:39:07
-
Михаил Русаков
Комментарии (1):
Можно более подробно рассказать про создание структуры папок для чего нужны папки в CSS, что в них помещать?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.