Star rating en Css

par Admin le mardi 05 février 2008 à 10:53

Nous allons présenter ici un système de notation en étoile en pure CSS. css star rating

D’abord, passons à la structure. Un nombre d étoile est tout simplement une liste de liens, est-il correct? Donc, nous allons créer une simple liste de liens.
Nous allons lui donner une classe de “star-rating” des liens et de la classe et le titre de manière appropriée.
XHTML:

Cette liste que nous créons pourrait potentiellement avoir href’s pointant vers la bonne page. Aussi, vous pouvez utiliser Ajax pour attacher une autre action pour chaque lien, mais nous ne traiterons pas ici. Il suffit de dire que nous allons simplement signaler à la bonne page pour cet avis.

Etape 2: Graphiques

J’adorerais faire un PNG transparent, mais les images PNG transparentes ne se comportent pas bien lors de l’utilisation de CSS manipulations de base, comme lors de l’utilisation Background-position. Donc, nous irons ensemble à la manière antique GIF. Voici l’image GIF:

css rating

Cette image a un état stationnaire, ce qui est le fond étoile et un état normal, qui est la première étoile.
Etape 3: CSS

Permet de pénétrer dans la viande de la CSS. Tout d’abord, j’ai toujours le style parent-élément le plus, dans ce cas, le JO (liste non ordonnée) d’une classe de “star-rating ‘:

1. .star-rating{
2. list-style: none; - désactiver la liste par défaut des balles image
3. margin: 3px; - Margin: 3px; - Je voulez de l’espace autour de cette chose
4. padding: 0px; Padding: 0px; - positionne à 0px juste pour être sûr
5. width: 100px; - Cette liste est à 5 étoiles, chaque étoile est 20px, par conséquent, il convient de 20px x 5 = 100 pixels de large
6. height: 20px; - La hauteur de chaque étoile est 20px. Comme il s’agit d’une liste horizontale, nous allons créer la liste hauteur à la hauteur de l’étoile.
7. position: relative; - Très important. Nous serons ensuite en utilisant le positionnement absolu.
8. background: url(star_rating.gif) top left repeat-x;- En répétant cette image horizontalement, la liste apparaîtra à cinq étoiles.
9. }

Pour une classe de “star-rating”, nous avons fait ce qui suit:

* Enlevé les bullets
* Lui a donné une petite marge
* Retirés de la liste entièrement tiret
* Effectué l’intégralité de la liste 100 pixels de large et 20 pixels de haut

Maintenant, pour la liste des articles, voici le css:

1. .star-rating li{
2. padding:0px; - aucun padding à tous
3. margin:0px; - pas de marge du tout
4. /*\*/ - Backslash hack, cela provoque IE5 Mac PAS de voir cette règle
5. float: left; - pour n’importe quel autre navigateur, nous allons le flotteur gauche, cela fait une liste horizontale
6. /* */ - Fin du hack IE5 Backslash
7. }

Fondamentalement, cette liste css raconte tous les éléments dans un objet avec une classe de “star-rating” doit être horizontale plutôt que verticale. Il ya un hack CSS appelé le backslash hack pour rendre le float: left; règle invisible pour IE5 Mac.

Maintenant, pour les points d’ancrage au sein de la liste des questions, voici la css:

1. .star-rating li a{
2. display:block; - nous voulons un bloc point, afin que nous puissions mess avec sa hauteur et largeur
3. width:20px; - trucs faciles, nous voulons que la largeur à la même largeur que l’étoile
4. height: 20px; - identique à la largeur
5. text-decoration: none; - supprimer le soulignement à partir du lien
6. text-indent: -9000px; -le texte de l’écran en utilisant une technique de remplacement d’image, nous ne voulons plus voir le texte.
7. z-index: 20; - nous allons revenir sur cette
8. position: absolute; - nous pouvons maintenant le contrôle exact coordonnées x et y de chaque étoile, par rapport à la mère JO
9. padding: 0px; - une fois de plus, nous n’avons pas besoin de rembourrage
10. background-image:none; - nous ne ferons pas preuve de l’étoile
11. }
12.
13. .star-rating li a:hover{
14. background: url(star_rating.gif) left bottom;
15. z-index: 1; - déplacer cette étoile au fond de la pile z-index
16. left: 0px; - déplacer cette étoile tout à fait à gauche, aligné sur le côté de l’élément parent JO
17. }

En résumé, les CSS pour les points d’ancrage n’est pas trop complexe. Au fond, nous faisons des points d’ancrage aussi grand que l’étoile graphiques et poussant leurs intérieure texte de l’écran. Vous ne verrez pas les points d’ancrage, mais il est comme avoir un ensemble de points chauds invisibles.

Comme pour le: hover état, c’est là que la magie est CSS. Lorsque les utilisateurs stationnaire, le lien spécifique qu’ils frôlent obtient poussé sur tout le trajet vers le bas de la pile z-index. Le lien a une image de fond dans la charge, mais le fond est décalé 20 pixels vers le bas, qui nous montre notre état de l’image. Le lien est poussé sur tout le trajet vers la gauche.

Maintenant, je sais ce que vous pensez. Si le lien déplace tout le trajet vers la gauche, puis le: hover État prendra fin et puis l’image de l’étoile va disparaître! Vous avez raison, mais, attendez! nous n’avons pas encore fini le CSS. Voyons si le prochain changement des règles CSS ce qui se passe à tous.

Aussi, vous pourriez penser, pourquoi répéter l’image horizontalement si le lien est toujours 20 pixels? Pourquoi répéter la même mise-x rule là? Une autre bonne question. Le but lorsque vous survolez le lien est de le faire:

* Poussez le lien situé tout à fait à gauche
* Rendre l’Etat plus de l’image du spectacle
* Faire le lien aussi large que de nombreuses étoiles cependant elle doit avoir - c’est-à-dire 3 étoiles = 3 x 20px par étoile = 60px - nous n’avons pas encore fait cela
* Répéter l’étoile graphique horizontalement de sorte qu’il ressemble à celui que nous avons - ce que nous avons fait

Ainsi, sur la partie restante CSS. Puisque chaque étoile a une largeur différente en fonction du nombre d’étoiles qu’elle est, nous nous devons d’avoir un individu règle pour chaque étoile lien. ‘est pourquoi nous avons mis une classe différente sur chaque lien.

1. .star-rating a.one-star{
2. left: 0px; Left: 0px;
3. }
4.
5. .star-rating a.one-star:hover{
6. width:20px; Width: 20px;
7. }
8. .star-rating a.two-stars{ . Étoiles, a.two-étoiles (
9. left:20px; Left: 20px;
10. } )
11. .star-rating a.two-stars:hover{
12. width: 40px; Width: 40px;
13. }
14. .star-rating a.three-stars{
15. left: 40px; Left: 40px;
16. }
17. .star-rating a.three-stars:hover{
18. width: 60px; Width: 60px;
19. }
20. .star-rating a.four-stars{
21. left: 60px; Left: 60px;
22. }
23. .star-rating a.four-stars:hover{
24. width: 80px; Width: 80px;
25. }
26. .star-rating a.five-stars{
27. left: 80px; Left: 80px;
28. }
29. .star-rating a.five-stars:hover{
30. width: 100px; Width: 100px;
31. }

Ce dernier bloc de fée CSS est facile à expliquer. Le but ici est de faire de chaque lien aussi large que le nombre d’étoiles x 20px c’est que lorsque le lien est un vol stationnaire. De cette façon, un lien avec quatre étoiles sera 0px partir de la gauche et 80px de large. Cela provoque toujours le lien pour être situé sous la souris, de sorte que nous ne perdions pas notre: hover état. Donc, sur chaque lien: hover doit être aussi large que le nombre de ses étoiles 20px x, c’est-à-dire pour deux étoiles, 2 = 40px x 20px, et ce pour trois 3 étoiles = 20px x 60px et ainsi de suite.

Vous remarquerez qu’il ya aussi un style pour chaque maillon de sa normale.La raison en est que chaque maillon est en position absolue. Si nous n’avons pas mis un coordonner gauche sur eux, il serait difficile de dire où chaque lien sera positionné horizontalement dans chaque navigateur. De cette façon, nous pouvons avoir affiné contrôle du positionnement horizontal de chaque lien.

Popularité : 14% [?]

Catégories: Css
Tags: Ajax, Css, design

WebCssDesign