Star ratings in CSS! ⭐️
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
stylesheets
README.md
index.html

README.md

🌟 one of my 100 projects 🌟

css star ratings

A little CSS-based star-rating module

🎬 css-star-ratings in action 🎬

Notes

  • Well, first I tried to make this happen with a <ul>, but I learned very quickly that the unicode-bidi: bidi-override and direction: rlt combo don't do the kind of reversal I wanted here. What they do on a <ul> is flip the position of the bullet, which is good to know, but it wasn't what I wanted, so fine! <span>s it is.
  • CSS Tricks: Star Ratings With Very Little Code is the basis of the bulk of the CSS here. I added flexbox display to the .rating container so that there wouldn't be those annoying little gaps between the star <span>s. (I've seen the workarounds for hacking that space and they all look like a nightmare for long-term maintenance.)
  • Once again, I tinkered around in Jackson's Spectral app to choose colors for the stars. 👍