Top-News.fr

Top-News > Informatique > Sprite CSS - exemple + explication

Sprite CSS - exemple + explication

Sprite CSS - exemple + explication .
On peut utiliser une seule image pour le design d' un site web !!!
En effet en jouant sur la propriété css background-position on peut définir quelle partie de l' image affiché en fond d' un " div " par exemple .

Un sprite est une image qui comporte les différentes icônes par exemple de notre site web , ces icônes doivent être réparties de manière précises .
Chaque icône sur le sprite a des coordonnées bien précises , c' est en utilisant ces coordonnées que l' on va pouvoir afficher une icône en particulier .
L' avantage d' utiliser des sprites est de gagner des requêtes vis à vis du serveur ( donc de la bande passante et aussi un peu de mémoire ) .

Exemple d' un sprite trouvé dans Google Images :

sprite

Chaque icone a donc sur ce sprite des coordonnées bien précises , chaque icône " web 2.0 😉  "   ici est sous forme d' un carré de 100 pixels de côté .

Voici maintenant le même sprite avec indiqué les coordonnées d' une icône .
sprite-exemple-1

Au niveau du code css on va tout d' abord commencer par dire que l' image de fond est notre sprite :

background:url(sprite.jpg) no-repeat;

Ensuite pour afficher une icône en particulier , on va " jouer " sur la propriété background-position :

background-position:-100px -200px;

Voici une illustration de l' effet de cette propriété ( c' est comme si on tirait une nappe sur une table ) :

sprite-exemple-2

Maintenant que l' on a " calée " notre image de fond on va pouvoir l' afficher dans un div qui aura la taille de l' icône .

Voir l' exemple .
Télécharger la source .

Code Source de la Page d' Exemple :

<html><head>

<title>Sprite CSS - exemple</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>
.boite{
width: 100px;
height: 100px;
padding: 0px;
margin: 4px;
background:url(sprite.jpg) no-repeat;
}
#icone1{
background-position:-200px -200px;
}
#icone2{
background-position:-100px -200px;
}
</style>

</head>

<body>

<h1>Utilisation d' un sprite</h1>

<img src="sprite.jpg" alt="sprite" title="sprite"/>

<hr />

code css pour le div : background-position:-200px -200px; - on d&eacute;finit &eacute;galement la taille du div ( width:100px;height:100px;)

<div class="boite" id="icone1">

&nbsp;

</div>

code css pour le div : background-position:-100px -200px; - on d&eacute;finit &eacute;galement la taille du div ( width:100px;height:100px;)

<div class="boite" id="icone2">

&nbsp;

</div>

<hr />

Test&eacute; avec Firefox3 et IE 7

</body>

</html>


plus de news sur Sprite CSS - exemple + explication

dans les dossiers : • Informatique

Votre avis sur le billet : Sprite CSS - exemple + explication