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 :
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 .
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 ) :
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 :
<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éfinit également la taille du div ( width:100px;height:100px;)
<div class="boite" id="icone1">
</div>
code css pour le div : background-position:-100px -200px; - on définit également la taille du div ( width:100px;height:100px;)
<div class="boite" id="icone2">
</div>
<hr />
Testé avec Firefox3 et IE 7
</body>
</html>
voir toutes les infos : Informatique
Votre avis sur le billet : Sprite CSS - exemple + explication