Temani AfifRecently, a lot of folks tried their best to provide a star rating system. Now it's time to bring THE "star rating" that will change the world!
I called it: The ONE star rating
Click here if you want to catch up with the previous episodes before continuing
Article No Longer Available
Article No Longer Available
Star-Rating Using A Single Input
Mads Stoumann ・ Jul 3 '21
#html
#css
#javascript
#webdev
Scalable "star rating" without JS (and no SVG or image for the star)
Temani Afif ・ Jul 4 '21
#css
#html
#webdev
#beginners
Star-rating using Unicode stars
Andrew Bone ・ Jul 5 '21
#a11y
#beginners
#webdev
#css
Article No Longer Available
Star rating in the Terminal
Siddharth ・ Jul 6 '21
#javascript
#tutorial
Why have multiple stars when we can do the job with only one star? A unique star that can hold all the information. Let's think outside of the box and build the future of rating systems.
See it in play:
Thanks to my geometry superpower, I divided the star into 5 parts and the number of selected parts will define the rating. So we have our 1 to 5 rating system with only one star!
Why this system will beat all the others?
It's compact: All the information is held in a small space. The space needed for one star.
It's outstanding: Everyone is getting bored with the old-school star rating. This one will impress your visitors and they will want to rate you with a 5/5!
rtl or ltr ??: stop thinking about that. We no more have a straight direction but a circular one. Do we have direction with clocks? No, we don't! Same thing here, it's a universal circular direction.
And let's not forget all the other advantages:
✔️ No JavaScript.
✔️ No complex HTML code.
✔️ A small CSS code.
✔️ No SVG, No images.
✔️ Works with keyboard navigation.
How does it work?
I kept the same HTML code as my previous implementation. The inputs and one extra element.
I first start by placing all the inputs (and the extra element) above each other inside a square element.
- The square is defined using a fixed width and a ratio (you can also set the height equal to the width)
- Thanks to
grid-area:1/1, I can have all the elements above each other without the need of usingposition:absolute - I add
width:100%;height:100%to the inputs so they cover the whole area and I make them invisible (but still interactive)
Then, I create the star shape using the <i> element and clip-path. That shape will have 3 background layers
- The bottom one that covers the whole star (the grey coloration)
- The gold middle layer that will define the selected parts. For this, I will use a
conic-gradientwith a72degstep (360deg/5) controlled with the variable--p. - The top layer is similar to (2) with a semi-transparent color and controlled with the variable
--l. Yes, this one will respond to the hover effect.
Now the real trick is the position and shape of our inputs.
Each one is clipped to the top part of the star like shown below:
At this step, all of them will define the same part of our star. We have to rotate them so each one will get on the top of a different part.
.stars input:nth-of-type(2) {transform:rotate(72deg)}
.stars input:nth-of-type(3) {transform:rotate(144deg)}
.stars input:nth-of-type(4) {transform:rotate(216deg)}
.stars input:nth-of-type(5) {transform:rotate(288deg)}
Now each input is placed on the top of one part of the star and clipped to that part.
I think everyone knows the rest of the story. On :hover or :checked I change the variables I described previously and we have our ONE star rating.
That's it! With a simple code, we get an innovative star rating. You can easily adjust the size, the circular direction and it does work with default values:
