Help Wordpress

Help Wordpress

Wordpress can be fast. Very fast. Really :)

Simple css rating bar via stars

Simple css rating bar via stars

I like simple solutions, because simple solution means reliability solution. For one of the projects I needed the simple css rating bar consisting of stars.
Basic requirements – a minimum of code, HTML and CSS only. Without JavaScript, without additional font files, but with the percentage rating. It mean, if you have all 5 stars, but the item rating 4.72, the bar must to display 4.72. In addition – easy customization (eg color or size change) and the possibility of adding microformats.
I googling first, but not found anything suitable for my requirements. All already solutions are based on JavaScript, or not showing the percentage value, or did not have customization.

Look at the picture to be clearer, what I mean:

Simple css rating bar, example
Simple css rating bar, example

I like font awesome and I can use it. But this project dont use font awesome, and I think, loads almost 300kb for rating bar only – it is bad idea, right?

Simple css rating bar, first method

Was coined by own decision, consisting of just one line of html code. HTML code – 80 characters only, JavaScript or additional fonts like “font awesome” is missing.

<span class="stars-bar-rating"><i style="width:85%"></i><b></b></span>

And CSS:

.stars-bar-rating {
display:block;
width:114px;
height:25px;
background: #aaa;
}
.stars-bar-rating i {
display:block;
height:25px;
overflow:hidden;
background: #fe9100;
}
.stars-bar-rating b {
display:block;
margin-top:-25px;
width:114px;
height:25px;
overflow:hidden;background: url('img/stars-bar-bg.png') no-repeat;
}

The principle is very simple – we have element “i”, it will a bar rating. The background color of this element will be color our stars, also you can use the gradient as needed. And on top of this element just added “b” element with background of transparent stars.

Transparent stars for css rating bar
Transparent stars for css rating bar

For use the schema.org microformat, just add a few elements with the parameters itemprop = “ratingValue” and itemprop = “reviewCount”:

<div class="stars-rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.75</span> stars, based on <span itemprop="reviewCount">4</span> reviews
</div>

Second method for simple css rating bar

Thanks to Noah Blon tips, I can use second method for simple css rating bar. In this case HTML take 63 bytes only + SVG 499 bytes. In addition, it very flex method – we can change size and count of stars, also the stars easily scales to the size of you needed.

With will use the mask property. The syntax for a CSS mask-image is similar to background-image, and I think, the code samples very clear.

HTML is very small:

<div class="wa-star-bar-rating"><i style="width:90%"></i></div>

The same simple CSS:

.wa-star-bar-rating,
.wa-star-bar-rating i {
display: block;
height: 50px;
}
.wa-star-bar-rating {
width: 250px;
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 150 150" height="150px" width="150px"><g transform="translate(-25,0)"><path d="m 172.35714,67.190469 -36.77859,35.505441 8.39818,50.4259 -45.132893,-24.00674 -45.362705,23.5696 8.884939,-50.34242 L 25.932197,66.483167 76.55628,59.376583 99.401613,13.644842 121.80408,59.595151 Z" /></g></svg>') repeat-x;
mask: url('data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 150 150" height="150px" width="150px"><g transform="translate(-25,0)"><path d="m 172.35714,67.190469 -36.77859,35.505441 8.39818,50.4259 -45.132893,-24.00674 -45.362705,23.5696 8.884939,-50.34242 L 25.932197,66.483167 76.55628,59.376583 99.401613,13.644842 121.80408,59.595151 Z" /></g></svg>') repeat-x;
-webkit-mask-size: 50px 50px;
mask-size: 50px 50px;
background-color: #aaa;
}
.wa-star-bar-rating i {
background-color: #fe9100;
}

In example 5 stars (mask-size take 1/5 from main div). If you wish 10 stars rating bar, mask-size must take 1/10 from main div.

If the article proved helpful to you, please click on one of the buttons to share it with your friends. Thanks!

Related posts:

WordPress PageSpeed optimization

WordPress PageSpeed optimization

Quite often turn to me with a request to “speed up site” – say, Google shows 50 out of 100, and because of this the site is lost [...]
RSS Icon via CSS

RSS Icon via CSS

CSS3 allows us to draw very beautiful objects, and in some cases to dispense with the use of the usual graphics. Let’s try to make the icon for [...]
Ukrainian Trident made by CSS

Ukrainian Trident made by CSS

Today Ukraine is celebrating Independence Day. This year, because of the Russian invasion, the Independence Day will be different from past holidays: The traditional firework on Independence Day [...]

Leave a Reply

Your email address will not be published. Required fields are marked *