<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как сделать возможность оценивания на 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

Заключение

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

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

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

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

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

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

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

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

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

pahomstyle pahomstyle 13.09.2016 09:50:16

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

Ответить

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