A Pen by bguiz.

CSS-Rating-Stars.markdown

CSS Rating Stars

A Pen by bguiz on CodePen.

License.

index.html

<div class="rating rating-10">
  <i class="star-10">★</i>
  <i class="star-20">★</i>
  <i class="star-30">★</i>
  <i class="star-40">★</i>
  <i class="star-50">★</i>
</div>
<div class="rating rating-15">
  <i class="star-10">★</i>
  <i class="star-20">★</i>
  <i class="star-30">★</i>
  <i class="star-40">★</i>
  <i class="star-50">★</i>
</div>
<div class="rating rating-20">
  <i class="star-10">★</i>
  <i class="star-20">★</i>
  <i class="star-30">★</i>
  <i class="star-40">★</i>
  <i class="star-50">★</i>
</div>
<div class="rating rating-25">
  <i class="star-10">★</i>
  <i class="star-20">★</i>
  <i class="star-30">★</i>
  <i class="star-40">★</i>
  <i class="star-50">★</i>
</div>
<div class="rating rating-30">
  <i class="star-10">★</i>
  <i class="star-20">★</i>
  <i class="star-30">★</i>
  <i class="star-40">★</i>
  <i class="star-50">★</i>
</div>
<div class="rating rating-35">
  <i class="star-10">★</i>
  <i class="star-20">★</i>
  <i class="star-30">★</i>
  <i class="star-40">★</i>
  <i class="star-50">★</i>
</div>
<div class="rating rating-40">
  <i class="star-10">★</i>
  <i class="star-20">★</i>
  <i class="star-30">★</i>
  <i class="star-40">★</i>
  <i class="star-50">★</i>
</div>
<div class="rating rating-45">
  <i class="star-10">★</i>
  <i class="star-20">★</i>
  <i class="star-30">★</i>
  <i class="star-40">★</i>
  <i class="star-50">★</i>
</div>
<div class="rating rating-50">
  <i class="star-10">★</i>
  <i class="star-20">★</i>
  <i class="star-30">★</i>
  <i class="star-40">★</i>
  <i class="star-50">★</i>
</div>

style.scss

@import "compass";
$font-size: 20px; // <-- Adjust this only!
$star-width: 1.5em;
$star-is_inactive-color: #eee !default;
$star-colors: #cc8b1f #cc8b1f #dcb228 #dcb228 #f0991e #f0991e #f26a2c #f26a2c #dd050b #dd050b !default;

body { 
  padding: 20px; 
  font-size: $font-size;
}

.rating i {
  display: inline-block;
  width: 0;
  height: $star-width;
  border-width: 0 ( $star-width / 2 );
  border-style: solid;
  border-color: #eee;
  border-radius: .22em;
  color: white;
  background: $star-is_inactive-color;
  font-style: normal;
  line-height: $star-width + 0.1em;
  text-indent: -0.5em;
  text-shadow: 1px 0 1px hsl(0, 0%, 70%);
}

$star-step: 5;
$star-count: 10;

/** Colors */
@function stars-color($num, $star-colors: $star-colors) {
  @return nth($star-colors, $num / $star-step);
}

@for $bi from 1 through $star-count {
  $i: $bi * $star-step;
  %rating-#{$i} {
    border-color: stars-color($i);
    background: stars-color($i);
  }
  @for $bj from 1 through $bi {
    $j: ((1 + $bj) * $star-step);
    .rating-#{$i} .star-#{$j} {
      @extend %rating-#{$i};
      @if ($bi % 2 == 1 and $bj == $bi) {
          @extend %half-rating;
      }
    }
  }
}

%half-rating {
  border-right-color: $star-is_inactive-color;
}

@media print {
  .rating {
    -webkit-print-color-adjust: exact;
    i {
      text-shadow: none;
    }
  }
}