Réaliser des Stars rating en full CSS sans images

stars rating

Les stars rating sont des modèles largement utilisé sur dans le e-Commerce mais aussi peut être utilisé sur n’importe quel type de site.

La solution que nous allons vous proposer ici est fait avec très peu de code et sans JavaScript.
(Html + CSS 3)

La structure HTML

Nous allons utiliser le markup unicode pour représenter une étoile (☆), si vous utiliser déjà UTF-8 cela ne devrait pas poser de problème.
Sinon pour pouvez utiliser les caractères spéciaux ayant pour code : ☆

Dans notre exemple vous pouvez utiliser autant d’étoiles que vous souhaiter. (dans notre cas, on a utilisé 5 étoiles donc 5 span )

Le css

Maintenant, nous devons compléter l’intérieur vide de nos étoiles par un étoile de couleur jaune pour cela on va utiliser l’événement hover CSS3.

Puis nous positionnons l’élément en absolute ( avec top: 0;left: 0;). L’étoile jaune sera superposée sur l’étoile avec fond transparent qu’on pourra changer de couleur ou de taille à notre guise.

Mais le rendu que nous avons jusque là, se fait seulement sur étoile individuel cependant notre modèle exige que si nous survolons le 4eme étoile donc les 3 autres précédent doivent être sélectionné aussi…

Si nous utilisons le CSS de façon basique, il est impossible de sélectionner les éléments survolé précédemment mais pour cela il nous faudra utiliser un sélecteur d’adjacence indirecte et ainsi inverser l’ordre des caractères pour sélectionner toutes les étoiles qui apparaissent avant l’étoile survolé.

C’est tout! Nous allons résumer dans le code suivant le peu de ligne nécessaire pour faire fonctionner notre rating stars.

Cas pratique

Pratiquement JavaScript doit être utilisé pour sélectionner les étoiles vu que toute façon, quand un utilisateur clique sur une étoile, le résultat sera toujours renvoyée par Ajax

Mais si vous êtes intéressé par le modèle d’un site Web qui fonctionne toujours sans JavaScript, ces évaluations étoilées seront bien utiles pour vous.

Répondre