Отступ между звёздами рейтинга

@phpk · Регистрация: 15.05.2013

Студворк — интернет-сервис помощи студентам

Допустим имеются на странице звёздочки рейтинга.
Название: Screenshot_3.png
Просмотров: 42

Размер: 1.3 Кб

Они расположены в два слоя: 1й это белые звёзды, 2й слой - закрашенные звёзды в виде :before-элемента.
Ширина второго слоя задаётся в виде css-свойства width от всей ширины первого слоя, т.е. свойство width закрашивает звёзды.
Подскажите, как сделать, чтобы между каждой звёздочкой второго слоя был отступ?
Как на приведённом рисунке ниже.
Название: Screenshot_4.png
Просмотров: 42

Размер: 1.1 Кб

Название: Screenshot_4.png
Просмотров: 42

Размер: 1.1 Кб

@Vlad03 · 06.03.2017, 11:12

Код приведите.

@phpk · 06.03.2017, 12:13 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
.star-rating {
    float: right;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
    font-family: star; шрифт звёзд
}
 .star-rating:before {
    content: "\73\73\73\73\73";  /*белые звёзды*/
    color: #d3ced2;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}
.star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}
.star-rating span:before {
    content: "\53\53\53\53\53";  /*закрашенные звёзды*/
    top: 0;
    position: absolute;
    left: 0;
}
 
</style>
<div class="star-rating">
    <span style="width:60%"></span>
</div>

т.е. блок <div class="star-rating"> и его псевдо-элемент before - это белые звёзды, не закрашенные.
А вложенный span и его псевдо-элемент before это закрашенные звёзды
т.е. получается нужно в первом и втором слое проставить отступы между каждой звёздочкой.
Как это сделать?

@Vlad03 · 06.03.2017, 12:22

Попробуйте для .star-rating:before и .star-rating span:before "поиграться" с letter-spacing, как вариант.

@monochromer · 06.03.2017, 12:26

Сообщение от phpk

нужно в первом и втором слое проставить отступы между каждой звёздочкой.
Как это сделать?

Раз решили делать звезды через content, то и отступы можно сделать пробелами \0020

CSS
1
2
3
.star-rating span:before {
    content: "\0020\2605\0020\0020\2605\0020\0020\2605\0020\0020\2605\0020\0020\2605\0020"; 
}

@phpk · 06.03.2017, 12:30 **[ТС]**

Сообщение от monochromer

аз решили делать звезды через content, то и отступы можно сделать пробелами \0020

т.е. через каждый код пробела \0020 ставить код звезды \53?

HTML5
1
2
3
.star-rating span:before {
    content: "\53\0020\53\0020\53\0020\53\0020\53"; 
}

а как тогда управлять шириной пробела?

@aj17 · 06.03.2017, 12:36

Сообщение от phpk

а как тогда управлять шириной пробела?

Количеством пробелов?)

@phpk · 06.03.2017, 12:54 **[ТС]**

Сообщение от aj17

Количеством пробелов?)

не получится, т.к. в блоке <span style="width:60%"> ширина вычисляется динамически php-скриптом в зависимости от отзывов.
Получается для php-скрипта нужно задавать размер шрифта пробела и делать перерасчёт?
Есть ли решение по проще только используя css?

Добавлено через 6 минут

Сообщение от Vlad03

Попробуйте для .star-rating:before и .star-rating span:before "поиграться" с letter-spacing, как вариант.

кстати да, подходит такое решение, благодарю

@monochromer · 07.03.2017, 17:23

Сообщение от phpk

блоке <span style="width:60%"> ширина вычисляется динамически php-скриптом в зависимости от отзывов.
Получается для php-скрипта нужно задавать размер шрифта пробела и делать перерасчёт?

Нет, не нужно - значения же в %. Демо (изменение ширины показано анимацией).

HTML5
1
2
3
<div class="star-rating">
  <div class="star-rating__value"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.star-rating {
  position: relative;  
  display: inline-block;
  white-space: nowrap;
  font-size: 20px;
  height: 2em;
  line-height: 2em;
  color: gold;
}
 
  .star-rating::before {
      content: "\0020\2606\0020\0020\2606\0020\0020\2606\0020\0020\2606\0020\0020\2606\0020"; 
  }
 
 
.star-rating__value {
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  overflow: hidden;
  animation: demorating 4s linear infinite alternate;
}
 
  .star-rating__value::before {
      content: "\0020\2605\0020\0020\2605\0020\0020\2605\0020\0020\2605\0020\0020\2605\0020"; 
  }
 
@keyframes demorating {
  from { width: 0;    }
    to { width: 100%; }
}

@anttoshka · 09.03.2017, 12:58

Сообщение от monochromer

Нет, не нужно - значения же в %. Демо (изменение ширины показано анимацией).
HTML5

не работает такой вариант. Попробуйте найти разницу выставив ширину 12%, 15% и 20%. Сам не знаю ответа, послежу за темой

@monochromer · 09.03.2017, 20:20

Сообщение от anttoshka

не работает такой вариант. Попробуйте найти разницу выставив ширину 12%, 15% и 20%

Зная, как работает данный метод, конечно же, разница не будет заметна на близких значениях. Наверно, предполагается, что рейтинг будет меняться дискретно с шагом 20%. Если же нужны отступы и недискретное изменение величины, то каждую звезду следует сделать отдельно.

@anttoshka · 09.03.2017, 22:34

Сообщение от monochromer

Зная, как работает данный метод, конечно же, разница не будет заметна на близких значениях. Наверно, предполагается, что рейтинг будет меняться дискретно с шагом 20%. Если же нужны отступы и недискретное изменение величины, то каждую звезду следует сделать отдельно.

Ясно, либо высчитывать на JS необходимую ширину.

Новые блоги и статьи Все статьи Все блоги /
Реализация Domain-Driven Design с Java Javaican 20.05.2025 DDD — это настоящий спасательный круг для проектов со сложной бизнес-логикой. Подход, предложенный Эриком Эвансом, позволяет создавать элегантные решения, которые точно отражают реальную предметную. . .	Возможности и нововведения C# 14 stackOverflow 20.05.2025 Выход версии C# 14, который ожидается вместе с . NET 10, приносит ряд интересных нововведений, действительно упрощающих жизнь разработчиков. Вы уже хотите опробовать эти новшества? Не проблема! Просто. . .	Собеседование по Node.js - вопросы и ответы Reangularity 20.05.2025 Каждому разработчику рано или поздно приходится сталкиватся с техническими собеседованиями - этим стрессовым испытанием, где решается судьба карьерного роста и зарплатных ожиданий. В этой статье я. . .	Cython и C (СИ) расширения Python для максимальной производительности py-thonny 20.05.2025 Python невероятно дружелюбен к начинающим и одновременно мощный для профи. Но стоит лишь заикнуться о высокопроизводительных вычислениях — и энтузиазм быстро улетучивается. Да, Питон медлительнее. . .	Безопасное программирование в Java и предотвращение уязвимостей (SQL-инъекции, XSS и др.) Javaican 19.05.2025 Самые распространёные векторы атак на Java-приложения за последний год выглядят как классический "топ-3 хакерских фаворитов": SQL-инъекции (31%), межсайтовый скриптинг или XSS (28%) и CSRF-атаки. . .
Введение в Q# - язык квантовых вычислений от Microsoft EggHead 19.05.2025 Microsoft вошла в гонку технологических гигантов с собственным языком программирования Q#, специально созданным для разработки квантовых алгоритмов. Но прежде чем погружаться в синтаксические дебри. . .	Безопасность Kubernetes с Falco и обнаружение вторжений Mr. Docker 18.05.2025 Переход организаций к микросервисной архитектуре и контейнерным технологиям сопровождается лавинообразным ростом векторов атак — от тривиальных попыток взлома до многоступенчатых кибератак, способных. . .	Аугментация изображений с Python AI_Generated 18.05.2025 Собрать достаточно большой датасет для обучения нейронной сети — та ещё головная боль. Часами вручную размечать картинки, скармливать их ненасытным алгоритмам и молиться, чтобы модель не сдулась при. . .	Исключения в Java: советы, примеры кода и многое другое Javaican 18.05.2025 Исключения — это объекты, созданные когда программа сталкивается с непредвиденной ситуацией: файл не найден, сетевое соединение разорвано, деление на ноль. . . Список можно продолжать до бесконечности. . . .	Как сделать SSO (Single Sign-On) в C# приложении stackOverflow 18.05.2025 SSO — это механизм, позволяющий пользователю пройти аутентификацию один раз и получить доступ к нескольким приложениям без повторного ввода учетных данных. Вы наверняка сталкивались с ним, когда. . .

@phpk 27 / 41 / 13 Регистрация: 15.05.2013 Сообщений: 1,313

	Отступ между звёздами рейтинга 06.03.2017, 11:11. Показов 1579. Ответов 11 Метки нет (Все метки) Допустим имеются на странице звёздочки рейтинга. Они расположены в два слоя: 1й это белые звёзды, 2й слой - закрашенные звёзды в виде :before-элемента. Ширина второго слоя задаётся в виде css-свойства width от всей ширины первого слоя, т.е. свойство width закрашивает звёзды. Подскажите, как сделать, чтобы между каждой звёздочкой второго слоя был отступ? Как на приведённом рисунке ниже. 0

@Vlad03 112 / 108 / 42 Регистрация: 22.01.2017 Сообщений: 452
	06.03.2017, 11:12
	Код приведите. 0

@Vlad03 112 / 108 / 42 Регистрация: 22.01.2017 Сообщений: 452
	06.03.2017, 12:22
	Попробуйте для .star-rating:before и .star-rating span:before "поиграться" с letter-spacing, как вариант. 1