Création facile et utile de Sprites CSS

Tout d'abord, nous devons construire notre Sprite d'images. Vous pouvez le faire avec Fireworks, Photoshop, ou n'importe quel autre logiciel de votre choix. Voici le mien :

Comme vous pouvez le voir, le Sprite consiste en une série d'images réparties entre elles par une ligne d'une largeur de 1px. Cette division n'est pas vraiment nécessaire, comme vous pouvez le voir sur le Sprite de Google, mais elle nous facilite la vie quand on arrive à l'écriture de la CSS. Croyez-moi !!!

Une fois notre Sprite d'images terminé, nous devons créer une image transparente de 1px par 1px au format gif. Cette image sera plus tard celle qui révèlera nos différentes images à l'intérieur de notre Sprite.

Tout d'abord, nous allons créer la classe sprite, qui se chargera de notre Sprite d'images.

.sprite { background:url(../images/mySprite.png); }

Après le chargement de notre Sprite, nous devons définir la hauteur et la largeur des images à l'intérieur de celui-ci.

Comme toutes mes images de monstres ont la même hauteur ainsi que les images d'applications, je peux leur donner une même classe qui contiendra leur hauteur. Je vais utiliser les classes : monster et application.

.sprite { background : url(../images/mySprite.png); }
.monster { height : 128px; }
.application { height : 61px; }

Maintenant, nous devons définir la largeur de chaque image, parce qu'elles sont toutes différentes. Nous allons utiliser une classe pour chacune d'elle.

.sprite { background : url(../images/mySprite.png); }
.monster { height : 128px; }
.application { height : 61px; }

/* Les montres */
.doctor { width : 103px; }
.octopus { width : 89px; }
.wolf { width : 115px; }
.star { width : 126px; }
.dog { width : 128px; }

/* Les applications */
.css { width : 61px; }
.activityMonitor { width : 58px; }
.dashboard { width : 51px; }
.quicktime { width : 53px; }
.scanner { width : 74px; }

Avez-vous fini ? Si oui, voici la meilleure partie. Nous devons attribuer une position à chaque image, grâce à la propriété CSS background-position, afin de les afficher correctement. Ce background-position doit toujours avoir des valeurs négatives, car notre image de fond doit se déplacer vers la gauche, pour montrer les différentes images.
Nous devons faire déplacer chaque image à l'intérieur du Sprite vers le coin supérieur gauche, car c'est l'endroit où nous commençons à visualiser l'image. Ce coin est égal à 0px en X, 0px en Y.

Mon Sprite a une marge à gauche et en haut de 2px. Nous devons en tenir compte lorsque nous définissons le background-position des éléments.

Souvenez-vous de la première valeur du background-position, horizontale (axe X) et la seconde verticale (axe Y). Maintenant, nous allons terminer notre loup qui doit se déplacer sur la gauche de 196 pixels et de 2 pixels vers le haut.

.sprite { background : url(../images/mySprite.png); }
.monster { height : 128px; }
.application { height : 61px; }

/* Les monstres */
.doctor { width : 103px; }
.octopus { width : 89px; }
.wolf { width : 115px; background-position : -196px -2px; }
.star { width : 126px; }
.dog { width : 128px; }

/* Les applications */
.css { width : 61px; }
.activityMonitor { width : 58px; }
.dashboard { width : 51px; }
.quicktime { width : 53px; }

Maintenant, nous allons terminer toutes nos images en utilisant la même méthode :

.sprite { background : url(../images/mySprite.png); }
.monster { height : 128px; }
.application { height : 61px; }

/* Les monstres */
.doctor { width : 103px; background-position : -2px -2px; }
.octopus { width : 89px; background-position : -106px -2px; }
.wolf { width : 115px; background-position : -196px -2px; }
.star { width : 126px; background-position : -312px -2px; }
.dog { width : 128px; background-position : -439px -2px; }

/* Les applications */
.css { width : 61px; background-position : -2px -133px; }
.activityMonitor { width : 58px; background-position : -64px -133px; }
.dashboard { width : 51px; background-position : -123px -133px; }
.quicktime { width : 53px; background-position : -175px -133px; }
.scanner { width : 74px; background-position : -229px -133px; }

Jetez un coup d'oeil au positionnement Y des éléments. Il en est de même pour tous les monstres et toutes les applications. Ils sont alignés sur la même position verticale ; par conséquent, ils partagent tous la même distance depuis le bord supérieur du Sprite.

<img src="images/transparent.gif" class="sprite monster doctor" alt="Image Docteur" />
<img src="images/transparent.gif" class="sprite monster octopus" alt="Image Octopus" />

<img src="images/transparent.gif" class="sprite monster wolf" alt="Image Loup" />
<img src="images/transparent.gif" class="sprite monster star" alt="Image Etoile" />

<img src="images/transparent.gif" class="sprite monster dog" alt="Image Chine" />
<img src="images/transparent.gif" class="sprite application css" alt="Image CSS" />

<img src="images/transparent.gif" class="sprite application activityMonitor" alt="Image Moniteur d'activité" />
<img src="images/transparent.gif" class="sprite application dashboard" alt="Image Tableau de bord" />

<img src="images/transparent.gif" class="sprite application quicktime" alt="Image Quicktime" />
<img src="images/transparent.gif" class="sprite application scanner" alt="Image Scanner" />

Ce code nous permet de définir l'effet de transparence qui est provoqué par l'image gif de 1 x 1px que nous avons créé auparavant. Une fois que c'est fait, il ne nous reste plus qu'appliquer les classes CSS et c'est le sprite time !