| colored style rating previews

Added by Plastikmaniac@userstyles, Created: May 25, 2010, Updated: Nov 18, 2010
  • With the style applied
  • With the style applied (Generated screenshot)
  • Without the style applied (Generated screenshot)


Hover over a userstyle link on this site - the link will fade-in to a color based on its rating!
| green = good
| yellow = OK
| gray = no rating
| red = bad
If you want the colors to show up all the time, instead of mousing over them, delete all instances of ":hover" in the code (like I did when I made the screenshot).

To adjust the fade-in / fade-out timing, modify the number with an "s" after it: .5s = one-half of a second.
Change the "ease-out .5s;" number to set the fade-out length. (It triggers when you're NOT hovering over it, i.e. when you move the cursor away.) Try "ease-out 2s;" and the links will take 2 full seconds to fade out.

Tested on, and written for, Google Chrome and Firefox*. Probably works on Safari.

*colors WILL work on Firefox 3.6 and earlier versions, but the CSS transitions won't.

UPDATE: The style lists should now have less spacing in between them; the non-style links are excluded from the colorin

You should to add comment and rate the style.


+ Create discussion

Applies to:

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.