Как сделать рейтинг звездочками на CSS

iconНа чтение15 мин
iconОпубликовано
iconОбновлено

Рейтинг звездочками — это популярный способ оценки или рейтинга различных продуктов и услуг на веб-сайтах. Он позволяет пользователям быстро и наглядно оценить качество или рейтинг объекта.

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

Для создания рейтинга звездочками вам потребуется знание базовых свойств CSS, таких как background-image, hover, transition и других. Мы покажем вам, как использовать эти свойства для создания анимированных и интерактивных рейтинговых систем.

В статье показано, как создать рейтинг звездочками с использованием различных методов, включая использование фонового изображения, Unicode символов и псевдоэлементов. Мы также предоставим вам примеры кода и подробные объяснения каждого шага, чтобы вы смогли легко создать собственный рейтинг звездочками на ваших веб-сайтах.

Содержание
  1. Знакомство с рейтингом звездочками CSS
  2. Инструкция
  3. Шаг 1: Создание HTML-структуры
  4. Шаг 2: Подключение CSS-стилей
  5. Шаг 3: Создание базового стиля
  6. Шаг 4: Добавление звездочек
  7. Шаг 5: Применение эффекта при наведении
  8. Шаг 6: Оценка с помощью звездочек
  9. Примеры

Знакомство с рейтингом звездочками CSS

Рейтинг звездочками CSS — это эффективный способ показать оценку или рейтинг на вашем веб-сайте с помощью стилизованных звездочек. Это позволяет пользователям легко оценить что-либо на вашем сайте и улучшает визуальный опыт.

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

Прежде всего, необходимо создать список звездочек, которые будут использоваться для отображения рейтинга. Вы можете сделать это с помощью тегов <ul> и <li>. Каждая звездочка будет представлена отдельным элементом списка <li>.

Когда список звездочек создан, вы можете добавить CSS-стили для оформления. Это можно сделать с использованием псевдоэлемента ::before и свойства content. Вы можете задать символ звездочки с помощью юникода или использовать изображение звездочки.

Например, если вы хотите использовать юникод для задания символа звездочки, вы можете добавить следующий CSS-код:


ul.rating {
list-style: none;
padding: 0;
}
ul.rating li {
display: inline-block;
color: #FFD700;
}
ul.rating li::before {
content: "\2605";
}
ul.rating li.active::before {
content: "\2605";
}

В этом примере мы создали список с классом «rating», который содержит элементы списка с классом «active», представляющими активную звездочку. Мы также использовали цвет «#FFD700» для представления золотого цвета звездочек.

Чтобы отобразить рейтинг звездочками на вашем сайте, вы просто добавьте элементы списка соответствующего класса на вашу веб-страницу и задайте класс «active» для элементов, которые представляют заполненные звездочки. Например:


<ul class="rating">
<li class="active"></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>

Этот код создаст рейтинг из пяти звездочек, из которых две будут заполнены и три будут пустыми. Заполненные звездочки представлены элементами списка с классом «active».

Вы можете настроить рейтинг звездочками CSS по своему вкусу, меняя цвет, размер, форму и другие свойства с помощью CSS.

Вот пример списка рейтинга звездочками с использованием CSS:

Теперь, когда вы знакомы с основами рейтинга звездочками CSS, вы можете использовать этот эффект на вашем веб-сайте для улучшения опыта пользователей.

Инструкция

В данной инструкции мы рассмотрим, как создать рейтинг с помощью звездочек с использованием CSS.

Для начала нам понадобится HTML-разметка, в которой будут содержаться элементы для отображения рейтинга. Мы будем использовать теги div и span. Например:


<div class="rating">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>

Затем, мы можем использовать CSS для добавления стилей к нашему рейтингу. Ниже приведен пример CSS-кода, который можно использовать:


.rating {
display: inline-block;
font-size: 0;
}
.star {
width: 16px;
height: 16px;
background-image: url(star.png);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
.star:hover, .star:hover ~ .star {
background-image: url(star-filled.png);
}

В данном примере мы используем один спрайт со звездочками, который содержит два изображения: одно для пустых звездочек и одно для заполненных звездочек. Мы устанавливаем фоновое изображение и размеры для каждого элемента star. Также мы используем псевдокласс :hover для изменения фонового изображения при наведении курсора мыши на звездочку.

Далее, мы можем добавить JavaScript, чтобы осуществлять интерактивное изменение рейтинга. Например:


var ratingStars = document.querySelectorAll('.star');
Array.from(ratingStars).forEach(function(star) {
star.addEventListener('click', function() {
this.classList.toggle('selected');
});
});

В данном примере мы используем JavaScript для выбора всех элементов с классом ‘star’ и добавления обработчика события клика на каждый элемент. При клике на звездочку, к ней добавляется класс ‘selected’, который устанавливает заполненную звездочку.

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

Шаг 1: Создание HTML-структуры

Перед тем, как приступить к созданию рейтинга звездочками с помощью CSS, необходимо создать базовую HTML-структуру, которая будет содержать наш рейтинг.

Для начала создадим контейнер, в котором будут располагаться звездочки. Для этого воспользуемся тегом div:


<div class="rating">
<!-- Здесь будут звездочки -->
</div>

Затем внутри контейнера добавим упорядоченный список (ol), в котором будут размещаться элементы с описанием звездочек. Каждый элемент списка будет представлять одну звездочку. Используем для этого тег li:


<div class="rating">
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>

После этого добавим таблицу с описанием рейтинга, в которой будут указаны значения, соответствующие каждой звезде. Для этого воспользуемся тегами table, thead, tbody и tr:


<table class="rating-table">
<thead>
<tr>
<th>Оценка</th>
<th>Значение</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 звезда</td>
<td>1</td>
</tr>
<tr>
<td>2 звезды</td>
<td>2</td>
</tr>
<tr>
<td>3 звезды</td>
<td>3</td>
</tr>
<tr>
<td>4 звезды</td>
<td>4</td>
</tr>
<tr>
<td>5 звезд</td>
<td>5</td>
</tr>
</tbody>
</table>

Теперь наши HTML-структура и таблица с описанием рейтинга готовы. На следующем шаге мы добавим стили, чтобы превратить наше описание звездочек в реальные рейтинги.

Шаг 2: Подключение CSS-стилей

После создания файла HTML и размещения на нем необходимого контента, следующим шагом является подключение CSS-стилей. CSS (Cascading Style Sheets) используется для оформления и стилизации веб-страницы.

Для начала, создайте новый файл с расширением .css, например, styles.css. Этот файл будет содержать все стили для вашей страницы.

Затем, откройте созданный файл HTML в любом текстовом редакторе и найдите тег <head>. Внутри этого тега добавьте тег <link> с атрибутами rel, type и href.

  1. Атрибут rel указывает на тип отношения между текущей страницей и подключаемым файлом стилей. В данном случае, значение атрибута должно быть «stylesheet».
  2. Атрибут type указывает тип содержимого файла. В данном случае, значение атрибута должно быть «text/css».
  3. Атрибут href указывает на путь к файлу со стилями. В данном случае, значение атрибута должно быть «styles.css», если файл находится в той же папке, что и файл HTML.

Вот пример кода, который нужно добавить внутри тега <head>:

<link rel="stylesheet" type="text/css" href="styles.css">

После добавления этого кода, браузер будет автоматически подключать CSS-стили из файла styles.css и применять их к вашей странице. Теперь вы можете создавать различные стили и правила в файле styles.css.

Более подробная информация о создании и настройке CSS-стилей выходит за рамки данного руководства, но теперь вы знаете, как подключить CSS-стили к вашему файлу HTML.

Шаг 3: Создание базового стиля

  1. Для начала создадим базовый стиль для рейтинга звездочками.
  2. В HTML-файле создайте внешнюю таблицу стилей или добавьте стили непосредственно в секцию style внутри head.

Ниже приведен пример таблицы стилей:


table {
border-collapse: collapse;
width: 200px;
}
td {
padding: 5px;
border: 1px solid #000;
text-align: center;
}

В этом примере мы задаем стиль для таблицы и ячеек:

  • Свойство border-collapse: collapse; устанавливает стиль объединения границ таблицы.
  • Свойство width: 200px; задает ширину таблицы.
  • Свойство padding: 5px; задает отступ внутри ячеек.
  • Свойство border: 1px solid #000; задает стиль границы ячеек.
  • Свойство text-align: center; выравнивает содержимое ячеек по центру.

Вы можете настроить стили в соответствии со своими предпочтениями и требованиями дизайна.

Шаг 4: Добавление звездочек

Теперь, когда мы создали основу для нашего рейтинга, давайте добавим звездочки. Для этого мы будем использовать Unicode символы, которые выглядят как звездочки.

Сначала определим класс для звездочек. Мы будем использовать символ «★» (звездочка с заполнением), представленный в Unicode как U+2605. Добавим класс «star» к элементу, который будет представлять звезду в нашем рейтинге.

<style>
.star {
content: "\2605";
color: gold;
font-size: 2em;
}
</style>

Теперь, когда у нас есть класс для звездочек, давайте добавим их к каждому элементу списка. Создайте элементы списка с классом «star» и добавьте их внутрь элементов списка с помощью псевдоэлемента ::before.

<ul class="rating">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<style>
.rating li::before {
content: "\2605";
color: gold;
font-size: 1.3em;
margin-right: 5px;
}
</style>

Теперь каждый элемент списка будет отображаться с звездочкой рейтинга слева от текста. Мы задали немного больший размер звездочки и добавили небольшой отступ справа для улучшения визуального восприятия.

Теперь вы можете добавить несколько звездочек к каждому элементу списка для более точного отображения рейтинга. Просто скопируйте и вставьте символ для звездочки несколько раз внутри псевдоэлемента ::before.

<ul class="rating">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<style>
.rating li::before {
content: "\2605\2605";
color: gold;
font-size: 1.3em;
margin-right: 5px;
}
</style>

Теперь каждый элемент списка будет отображаться с двумя звездочками рейтинга.

Шаг 5: Применение эффекта при наведении

Чтобы сделать наш рейтинг интерактивным, мы можем добавить эффект при наведении к нашим звездам. Этот эффект выделит выбранную звезду, чтобы пользователю было легче понять, какая звезда выбрана.

Для этого мы будем использовать псевдокласс :hover в CSS. Псевдокласс :hover применяется, когда курсор находится над элементом. Мы можем использовать его, чтобы изменить стиль звездочек при наведении.

Для применения эффекта при наведении на звезду, добавьте следующий код после CSS свойств для рейтинга:

.rating__stars:hover .star {
color: red;
}

В этом коде мы используем комбинатор потомков, чтобы выбрать все звезды, находящиеся внутри элемента с классом «rating__stars», когда находятся в состоянии :hover (наведены на них).

Здесь мы применяем стиль «color: red» к каждой звезде при наведении. Вы можете изменить этот стиль на любой другой, который будет соответствовать дизайну вашего проекта.

Теперь, когда вы наводите курсор на звезды, они будут выделяться красным цветом.

Применение эффекта при наведении делает рейтинг более интерактивным и удобным для пользователей. Они могут легко определить, какая звезда выбрана, и изменить свой выбор при необходимости.

Шаг 6: Оценка с помощью звездочек

Теперь, когда мы создали структуру звездочек с помощью CSS, мы можем использовать ее для оценки чего-либо на нашем сайте. Давайте рассмотрим несколько примеров использования звездочек для оценки контента.

1. Оценка продукта или услуги

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

Для этого можно использовать список с звездочками или таблицу, в которой каждая строка представляет один продукт или услугу, а столбец с звездочками служит для оценки.

2. Оценка статей или обзоров

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

Также можно использовать звездочки для оценки комментариев или отзывов, предлагая пользователям возможность оценивать содержимое, созданное другими участниками.

3. Оценка пользователей или профилей

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

Для этого можно использовать список с звездочками или таблицу, где каждая строка представляет профиль пользователя, а столбец с звездочками служит для оценки.

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

Примеры

Ниже приведены несколько примеров, которые помогут вам разобраться в создании рейтинга звездочками с помощью CSS:

  1. Простая реализация

    • HTML:


      • <div class="rating">
        <input type="radio" id="star5" name="rating" value="5">
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4">
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3">
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2">
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1">
        <label for="star1"></label>
      </div>

    • CSS:


      • .rating input[type="radio"] { display: none; }
      .rating label:before {
        content: '\2605';
        color: #ddd;
      }
      .rating input[type="radio"]:checked ~ label:before { color: #f4d03f; }

  2. Рейтинг со смещенной верхней звездой

    • HTML:


      • <div class="rating">
        <input type="radio" id="star5" name="rating" value="5">
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4">
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3">
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2">
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1">
        <label for="star1"></label>
      </div>

    • CSS:


      • .rating input[type="radio"] { display: none; }
      .rating label:before {
        content: '\2606';
        color: #ddd;
      }
      .rating input[type="radio"]:checked ~ label:before { color: #f4d03f; }
      .rating label:hover:before, .rating label:hover ~ label:before { color: #f4d03f; }
      .rating input[type="radio"]:checked ~ label:hover:before, .rating input[type="radio"]:checked ~ label:hover ~ label:before { color: #ddd; }

  3. Рейтинг с анимацией

    • HTML:


      • <div class="rating">
        <input type="radio" id="star5" name="rating" value="5">
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4">
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3">
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2">
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1">
        <label for="star1"></label>
      </div>

    • CSS:


      • .rating input[type="radio"] { display: none; }
      .rating label:before {
        content: '\2606';
        color: #ddd;
      }
      .rating input[type="radio"]:checked ~ label:before { animation: bounce 0.5s; color: #f4d03f; }
      .rating label:hover:before, .rating label:hover ~ label:before { color: #f4d03f; animation: none; }
      .rating input[type="radio"]:checked ~ label:hover:before, .rating input[type="radio"]:checked ~ label:hover ~ label:before { color: #ddd; animation: none; }
      @keyframes bounce {
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); }

  4. Рейтинг с материалов

    • HTML:


      • <div class="rating">
        <input type="radio" id="star5" name="rating" value="5">
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4">
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3">
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2">
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1">
        <label for="star1"></label>
      </div>

    • CSS:


      • .rating input[type="radio"] { display: none; }
      .rating label:before {
        content: '★';
        color: #ddd;
      }
      .rating input[type="radio"]:checked ~ label:before { color: #f4d03f; }
      .rating label:hover:before, .rating label:hover ~ label:before { color: #f4d03f; background: linear-gradient(#eee, #f4d03f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
      .rating input[type="radio"]:checked ~ label:hover:before, .rating input[type="radio"]:checked ~ label:hover ~ label:before { color: #ddd; background: none;

Добавить комментарий

Вам также может понравиться