Как мы звезды рейтинга дробили

Вместо предисловия

Привет всем хабражителям!
Взбрело мне как-то, холодным зимним вечером, внести на сайт вместо целых звезд рейтинга — их частичную заливку для дробных чисел (4.5, 3.85 и тд.). Так ведь и глазу милее и информативнее — какое заведение лучше, а какое — хуже. Вот и сели мы с командой думать и гадать.

Как мы путь свой искали

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

Тут у Кинопоиска все 10 звезд — одна картинка, где они еще и приклеены друг к другу. Так им очень легко закрасить оранжевым на столько, на сколько душа желает.

<div class='starbar'>
    <div class='outer'>
        <div class='starbar_w'></div>
    </div>
</div>

.starbar .outer {
    background: url(/images/starz.gif) no-repeat;
    width: 219px;
    height: 30px;
    position: absolute;
}
.starbar_w {
    display: block;
    width: 167.09px;
    background: url(/images/starz.gif) 0 -62px no-repeat;
    height: 30px;
    position: absolute;
}

Всегда есть где разгуляться!

Всё же, нам хотелось универсальный и масштабируемый вариант, полностью подчиняющийся BEM методологии ^[1]. К тому же, в проекте нет ни одного спрайта и все иконки реализованы с помощью собственного набора иконок, бережно собранного в шрифт. Но, думаю, об этом мы поговорим в других статьях ;)

В целом, мы пришли к эксперименту: а почему бы не наложить нашу шрифтовую иконочку поверх другой? Вот мы и сделали.

Каждую звездочку сделали отдельным объектом, состоящей из .stars__out в качестве контейнера и .stars__in в качестве заливки.

<div class="stars">
    <!-- ... Полностью зарисованная иконка ... -->
    <i class="cfi cfi--star stars__out">
        <i class="cfi cfi--star stars__in" style="width: 100%;"></i>
    </i>
    <!-- ... еще 3 повторения ... -->

    <!-- ... Иконочка зарисованная на 33% ... -->
    <i class="cfi cfi--star stars__out">
        <i class="cfi cfi--star stars__in" style="width: 33.33%;"></i>
    </i>
</div>

А вот и CSS:

    .cfi.cfi--star { /* ... */  } /* наш аналог Font Awesome, который рисует звезду */
    .stars__out {
        position: relative;
        margin-right: 5px; /* сделаем отступ между зведами */
        color: grey;
        z-index: 1;
    }
    .stars__in {
        /* разместим ка мы нашу заливку как дочернюю основной иконки и кинем поверх */
        position: absolute; 
        z-index: 2;
   
        color: orange; /* дадим солнечного цвета */
        font-size: inherit; /* и шрифту размер родителя */
        
        /* блоку дадим точки отчета по нулям относительно родителя */
        display: block; 
        top: 0; left: 0; bottom: 0;

        /* ну и ограничим область видимости, а также ширину установим в 0 по умолчанию   */
        overflow: hidden;
        width: 0; 
    }

Все. Дальше, когда нам нужно залить на 100% (полная звездочка), мы просто даем ей CSS свойство width: 100%.
А вот для неполных звездочек мы использовали еще одну хитрость. Мы ставим в ширину не x * 100%, а значение по специально рассчитанной формуле.
Все дело в психологии. Нам свойственно визуально воспринимать процент заполнения в объеме, а не в ширине, а поскольку звезда слева и справа имеет весьма малую площадь, что усложняет восприятие, мы придумали заполнять ее по ширине нелинейно:

Для нелинейной модели мы взяли синусоиду. Она как раз отлично описывает быстрое начало и окончание роста, и плавный рост в середине.
Развернули ее, получив arсsin, ужали его в рамки {0; 1} по обеим осям и получили неплохую и простую формулу для расчета «психологической заполненности» звезды.

Код на JavaScript:

var y = Math.asin( 2 * x - 1 ) / Math.PI + 0.5;

Как оказалось, такой принцип хорошо работает в старых браузерах, и даже ничего не ползет на IE9. Довольны были все: и дизайнеры, и заказчики, и даже мое Эго, что и побудило накатать статью.
Искренне надеюсь, что кому-нибудь это понадобится :)

Автор: reilag

Источник ^[2]