Scribd
Upload
53 views3 pages

The ONE Star Rating System

The document proposes a new single-star rating system as an alternative to traditional multi-star systems. It divides a single star shape into five parts, with each part representing a rating of 1 to 5. When a user selects a rating, the number of filled-in parts on the star updates to reflect their selection. This single-star system is compact, unique, and impressive for users. It can be built with HTML, CSS, and no JavaScript, using techniques like clip-path and gradient layers to represent the filled and hovered portions of the star.

Uploaded by

Nam Anh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
53 views3 pages

The ONE Star Rating System

The document proposes a new single-star rating system as an alternative to traditional multi-star systems. It divides a single star shape into five parts, with each part representing a rating of 1 to 5. When a user selects a rating, the number of filled-in parts on the star updates to reflect their selection. This single-star system is compact, unique, and impressive for users. It can be built with HTML, CSS, and no JavaScript, using techniques like clip-path and gradient layers to represent the filled and hovered portions of the star.

Uploaded by

Nam Anh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

The ONE star rating system — the future of

rating
#html #css #webdev #beginners

Temani Afif
Jul 7 ・3 min read

Recently, a lot of folks tried their best to provide 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 with the previous episodes before continuing

Why having 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 hold 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 of my previous implementation. The inputs and one extra
element.

 
Scalable "star rating" without JS (and no SVG or image for the
star)
Temani Afif ・ Jul 4 ・ 4 min read

#css #html #webdev #beginners

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 width)
 Thanks to grid-area:1/1, I can have all the elements above each other without the need
of using position: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

1. The bottom one that cover all the star (the grey coloration)
2. The gold middle layer that will define the selected parts. For this I will use a conic-
gradient with a 72deg step (360deg/5) controlled with the variable --p.
3. The top layer 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 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-child(2) {transform:rotate(72deg)}


.stars input:nth-child(3) {transform:rotate(144deg)}
.stars input:nth-child(4) {transform:rotate(216deg)}
.stars input:nth-child(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 know 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:

You might also like