Як зробити можливість оцінювання на css.

Відео: Як створити HTML шаблон сайту

Всім привіт! У цій статті я хочу розповісти вам про те, як швидко зробити на сайті п`ятизірковий рейтинг з красивими анімаціями на CSS.

опис

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

Для початку ви можете подивитися демонстрацію. Там ви знайдете рейтинг з базової анімацією, а, точніше, з її відсутністю, далі йдуть такі анімації, як "слот машина", "збільшується зірка", "збільшується і обертається зірка", "зменшується зірка", "рейтинг з галочкою": ) Як ви можете бачити, анімації цікаві, красиві, а головне - якісні. Таку штуку буде не соромно підключити до себе на сайт! До речі, давайте якраз і поговоримо про те, як це все встановити.

Встановлення та налаштування

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

Відео: Як створити горизонтальне меню HTML і CSS

• index.html
• / css
• css file with chosen rating (eg .: starability-fade.min.css)
• / Starability-images
• icons.jpg
• [email protected]
• icons-checkmark.jpg (Include this file if you are going to use checkmark rating)
• [email protected] (Include this file if you are going to use checkmark rating)






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

Відео: Нова система оцінювання

Якщо ваша структура відрізняється, не забудьте вказати правильні шляхи до файлів.







тепер скопіюйте HTML код:

class="Starability-basic"gt;

First rating:
type="Radio"id="First-rate5"name="Rating"value="5"/ Gt;
for="First-rate5"title="Amazing"gt;5 stars
type="Radio"id="First-rate4"name="Rating"value="4"/ Gt;
for="First-rate4"title="Very good"gt;4 stars
type="Radio"id="First-rate3"name="Rating"value="3"/ Gt;
for="First-rate3"title="Average"gt;3 stars
type="Radio"id="First-rate2"name="Rating"value="2"/ Gt;
for="First-rate2"title="Not good"gt;2 stars
type="Radio"id="First-rate1"name="Rating"value="1"/ Gt;
for="First-rate1"title="Terrible"gt;1 star


class="Starability-basic"gt;

Second rating:
type="Radio"id="Second-rate5"name="Rating"value="5"/ Gt;
for="Second-rate5"title="Amazing"gt;5 stars
type="Radio"id="Second-rate4"name="Rating"value="4"/ Gt;
for="Second-rate4"title="Very good"gt;4 stars
type="Radio"id="Second-rate3"name="Rating"value="3"/ Gt;
for="Second-rate3"title="Average"gt;3 stars
type="Radio"id="Second-rate2"name="Rating"value="2"/ Gt;
for="Second-rate2"title="Not good"gt;2 stars
type="Radio"id="Second-rate1"name="Rating"value="1"/ Gt;
for="Second-rate1"title="Terrible"gt;1 star


Додайте таблицю стилів з назвою анімації


rel="Stylesheet"type="Text / css"href="Css / starability-fade.min.css"/ Gt;


У класі у fieldset вкажіть потрібну назву обраної вами анімації

Відео: Реакція на Mr. Marmok ("Мармок", "Баги, Приколи, фейлов")

class="Starability-fade"gt;

Підключіть файли з іконками.

назви анімацій

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

висновок

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

Всім дякую за увагу!