Questions sur les sprites CSS

Bonjour,

J'ai quelques questions sur l'utilisation des sprite CSS...

Comment déterminer avec précision la taille et l'emplacement de l'image à afficher dans le sprite? Je créé mon sprite avec photoshop par exemple mais après ...je fais comment pour connaitre la position exacte de chaque image outre que par l'intermédiaire de certain site?

Selon ce que j'ai compris, il est impossible d'effectuer un "repeat" d'un élément précis d'un sprite. Un sprite sert donc uniquement pour des éléments de décoration qui ne se répète pas...c'est bien ça ?

Quelle différence y a t'il entre :

#sprite{
height:29px;
width:188px;
background:url(monimage.jpg) no-repeat;
background-position:-193px -7px; 
}

et

#sprite{
height:29px;
width:188px;
background:url(monimage.jpg) -193px -7px no-repeat;
}

Merci

Salut,

La propriété background est un raccourci permettant de réunir en une seule propriété les valeurs des propriétés background-color, background-image, background-repeat, background-attachment et background-position.

Rien ne t'empêche de faire répéter les sprites CSS, même si l'intérêt est limité et que le résultat peut s'avérer disgracieux.

Pour connaître la position de chaque, tu peux déjà t'aider en les positionnant sous Photoshop au moyen de grilles placées à des pixels ronds (250, 500, 750, 1000, etc.). Pour le reste, il suffit de jongler avec les valeurs de background-position pour ajuster (avec Firebug).

Enfin, n'oublie pas que les sprites CSS ne doivent recevoir que des images décoratives.

Merci pour les réponses Victor BRITO,

Par contre sur la répétition d'un sprite, je veux bien un peut plus d'explications parce que si je fais :

#sprite{ 
height:29px; 
width:188px; 
background:url(monimage.jpg) -193px -7px repeat-x; 
}

ou

#sprite{ 
height:29px; 
width:188px; 
background:url(monimage.jpg) -193px -7px repeat-y; 
}

..c'est le sprite en entier qui se répète et non le "bout" d'image ..?

Merci

"..c'est le sprite en entier qui se répète et non le "bout" d'image ..?"
oui c'est normal c'est l'image de background qui se répète, tu ne peux pas faire autrement.

Victor BRITO a écrit :

Rien ne t'empêche de faire répéter les sprites CSS, même si l'intérêt est limité et que le résultat peut s'avérer disgracieux.

D’où ma question !
Donc si je fais un "repeat" d'un sprite, c'est bien le sprite dans sa totalité qui se répète et non le morceau d'image sélectionné et intégré au sprite que j'affiche .. on est bien daccord ou pas ?

Bonjour,

c'est la bande verticale ou horizontale qui se répète.
Pas de sprite possible pour les fonds qui se répètent dans les deux directions.
Si tu mélanges dans une page/un site les 3 répétitions possibles (aucune, X et Y), il te faut 3 fichiers de sprite, un pour chaque type.

Ok, mais j'ai un peut de mal quand même quand il sagit d'une répétition...
Prenons l'exemple de ce sprite :

Si je fais :

body{
height:46px;
width:33px;
background:url(sprite.png) -0px -57px repeat-x;
}

En supposant que le fond de ma page soit blanc, ça va alerner rouge,blanc,rouge,blanc,etc... au lieu d'avoir tout en rouge.
Si je fais un repeat-y, du coup j'ai rouge,noir blanc,etc..

Idem si j'intègre à un simple div

#toto{
width:300px;
height : 46px;
border:1px solid black;
background:url(sprite.png) -0px -57px repeat-x;
}

<div id="toto"></div>

..ça alterne rouge et blanc au lieu de tout rouge.

A l'inverse si je prend le fond noir pour le div avec "-0px -0px", ça fonctionne.

Si je fais :

#toto{
width:300px;
height : 300px;
border:1px solid black;
background:url(sprite.png) -0px -0px repeat-y;
}

J'ai alternance des couleurs.

Pour un sprite sur l'axe X :
A la final, on ne peut utiliser cette méthode avec repeat-x que si toute les images intégrées dans le sprite sont superposés et font la même longueur.
Pour un sprite sur l'axe Y :
Pour un repeat-y, les images intégrés au sprite doivent être les une à côté des autres et doivent faire la même hauteur.

J'ai bon là ??
Modifié par tryan (01 Apr 2011 - 10:35)

Scusi de ce petit up mais si je n'ai pas réponse précise sur alsacreations, je ne vois pas ou je peux trouver réponse autre part .

bonsoir,

Un exemple je l’espère te fera comprendre.

Tu crées une image de 100px de hauteur et 5px de large.

50px x 5px en noir, 50px x 5px en rouge.

Tu crées une div de 50px de haut, tu peux faire un repeat-x qui sera soit rouge soit noir, en fonction de ton background position. Si tu dépasses 50px de hauteur tu auras un peu de rouge ou de noir.

Pour un icone, en revanche il faudra fixer une taille précise à l'élément, nul besoin d'avoir des icones de même taille dans ton sprite, il suffit de juste bien positionner ton background-position.

Pour t'aider tu pourrais regarder les sprites de dailymotion,google, allocine
Modifié par rs459 (01 Apr 2011 - 22:10)

Salut rs459,

Merci pour tes explications .

Ton exemple démontre bien ce que j'ai écris plus haut dans ce cas à savoir :

a écrit :
Pour un sprite sur l'axe X :
A la final, on ne peut utiliser cette méthode avec repeat-x que si toute les images intégrées dans le sprite sont superposés et font la même longueur.
Pour un sprite sur l'axe Y :
Pour un repeat-y, les images intégrés au sprite doivent être les une à côté des autres et doivent faire la même hauteur.

Si je reprend ton exemple pour afficher la couleur noir et que je change juste la longueur de la couleur rouge de 2px en plus (dans le sprite), je vais avoir alternance des couleurs, soit : noir suivit de 2px de rouge puis re noir, etc.. il faut donc que les images contenu dans un sprite que l'on utilise pour un repeat-x fasse exactement la même longueur.

Ok ou pas ok ?

Si tu modifies ton sprite, il faut que tu modifies tous les background-position (tous les décalages) des sprites qui sont plus à droite et/ou plus bas.
La maintenance est un des inconvénients des sprites CSS (note post-Kiwi Party : ah tiens ça fait un usage de plus pour LESS dont parlait Corinne hier)

a écrit :


Si je reprend ton exemple pour afficher la couleur noir et que je change juste la longueur de la couleur rouge de 2px en plus (dans le sprite), je vais avoir alternance des couleurs, soit : noir suivit de 2px de rouge puis re noir, etc.. il faut donc que les images contenu dans un sprite que l'on utilise pour un repeat-x fasse exactement la même longueur.

Ok ou pas ok ?

La même largeur pour un repeat-x et ca doit la seule chose présente sur cette axe.

Si tu veux que ton morceau de sprite se répète sur toute la largeur il doit faire toute la largeur de l'image sprite, ou avoir un largeur supérieure.

Si tu veux répéter un morceau de sprite sur la hauteur ce morceau devra avoir une hauteur équivalente à la hauteur de ton image sprite ou supérieure.

Pour un icône tu crées soit une balise image avec une gif transparent (empty.gif par exemple), soit tu peux faire comme facebook il utilise <I> avec une hauteur et largeur fixée :

<i class="img sp_a6qw52 sx_249078"></i>

Pour résumer les sprites nécessitent, vraiment une réflexion assez importante, pour simplifier la maintenabilité, et fixer les tailles.

Ok ok, donc j'avais bien comprit la chose .

Merci