As we star rating crushed

Instead of the preface

Hello to all habrazhiteli!

It took me some time, on a cold winter evening, to add to the site instead of whole rating stars - their partial fill for fractional numbers (4.5, 3.85, etc.). So after all, the eye is nicer and more informative - which institution is better and which one is worse. So we sat down with the team to think and guess.

How were we looking for our way

Since we mainly have top institutions and 3+ ratings, whole stars blur perception. But then there are nuances. The most common practice is to overlay an image one on top of the other. From the very, very beginning, we thought of doing everything with the help of a mask image, but, alas, the design did not mean that the stars could be near, and controlling the width of the fill block and the size of the star is not very convenient.

')

Here Kinopoisk has all 10 stars - one picture, where they are also glued to each other. So it is very easy for them to paint in orange as much as their souls desire.

<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; } 

There is always where to roam!

Still, we wanted a universal and scalable version, fully subordinate to the BEM methodology . In addition, the project does not have a single sprite and all the icons are implemented using its own set of icons, carefully assembled in the font. But I think we will talk about this in other articles;)



In general, we came to the experiment: why not impose our font icon on top of another? So we did.



Each asterisk is made into a separate object consisting of .stars__out as a container and .stars__in as a fill.

 <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> 

And here is the 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; } 

Everything. Next, when we need to fill in 100% (full asterisk), we just give it the CSS property width: 100% .

But for incomplete stars, we used another trick. We set in width not x * 100% , but the value according to a specially calculated formula.

It's all about psychology. We tend to visually perceive the percentage of filling in the volume, not in width, and since the star on the left and the right has a very small area, which complicates the perception, we came up with filling it nonlinearly across the width:



For a non-linear model, we took a sine wave. She just perfectly describes the rapid beginning and end of growth, and a smooth growth in the middle.

Deployed it, getting arsin, squeezed it into {0; 1} on both axes and got a good and simple formula for calculating the "psychological fullness" of the star.







JavaScript code:

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

As it turned out, this principle works well in older browsers, and even nothing crawls on IE9. Everybody was satisfied: designers, customers, and even my Ego, which prompted to roll the article.

I sincerely hope that someone will need it :)