Création facile et utile de Sprites CSS

Date de publication : 10/12/2009

Par Ignacio Ricci (Auteur)
 Alban Lelasseux (Traducteur)
 

Cet article est la traduction de : Creating easy and useful CSS Sprites. Retrouvez toutes les traductions de CSS Globe disponibles sur http://cssglobe.developpez.com/.
Cet article vous montrera une méthode permettant d'améliorer le temps de chargement des images sur votre site web.
2 commentaires Donner une note à l'article (5)

               Version PDF (Miroir)   Version hors-ligne (Miroir)

I. Permettez-nous de commencer avec les bases. Que sont les sprites CSS ?
II. Création de notre Sprite CSS
II-A. Construction de l'image
II-B. Création de notre Sprite révélateur d'images
II-C. Ecriture de notre code CSS
II-D. Créer notre code (X)HTML (du gâteau)
III. Limitations de cette méthode
IV. Les icônes de ce tutoriel
V. Remerciements


I. Permettez-nous de commencer avec les bases. Que sont les sprites CSS ?

Les sprites CSS sont un moyen de combiner des images pour améliorer le temps de chargement de la page, réduisant ainsi le nombre de demandes sur notre serveur. Dans cet article, je vais vous apprendre comment réaliser des sprites entièrement en CSS.

Consultez la démonstration | Téléchargez le fichier ZIP

Pour expliquer clairement ce qu'est un sprite CSS, en voici une image d'un qui a été réalisé par Google :

CSS Sprite créé par Google
Lorsque vous effectuez une recherche sur Google, vous avez une pagination en pied de page et vous obtenez quelque chose comme ceci : Gooooooooooooooogle. La lettre o est répétée à l'aide du Sprite CSS. Au lieu de la charger 15 fois, Google charge le sprite avec toutes les lettres en une fois.


II. Création de notre Sprite CSS


II-A. Construction de l'image

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 :

Exemple de Sprite CSS
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 !!!


II-B. Création de notre Sprite révélateur d'images

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.


II-C. Ecriture de notre code CSS

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.

Hauteur et largeur des Sprites d'images
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.


II-D. Créer notre code (X)HTML (du gâteau)


<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 !


III. Limitations de cette méthode

Pour qu'un Sprite d'images en CSS fonctionne, il doit toujours avoir une largeur, une hauteur et un background-position. Si vous n'avez pas défini la largeur ou la hauteur de l'élément, vous verrez l'ensemble du Sprite dans l'image. C'est évident mais il est bon de le mentionner.


IV. Les icônes de ce tutoriel

Les icônes utilisées dans ce tutoriel sont les en icônes Somatique Xtras 2 créées par David Lanham.


V. Remerciements

Tous mes remerciements à laedit pour sa relecture.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.0 TransitionalValid CSS!

Copyright © 2009 CSS Globe. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum CSS

Blogs

Hébergement

 
Partenaires

Hébergement Web