28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'utilise actuellement "http://fr.spritegen.website-performance.org/" pour générer mes sprites css. Le sprite est soit horizontal soit vertical.

Après avoir lu le très bon article suivant "http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/", je me demande avec quel outil générer un sprite pareil.
Les images sont un coup à gauche puis un coup à droite ou encore à la même hauteur.

Par avance, un grand merci,

Raphaël
Bonjour,

a écrit :
Les images sont un coup à gauche puis un coup à droite ou encore à la même hauteur.


Je ne suis pas certain de comprendre cette phrase mais si tu parles de l'image de l'article, il y a de grande chances pour que le sprite présenté ai été réalisé manuellement via un logiciel d'image comme Photoshop ou autre. C'est une méthode certes plus longue mais plus malléable et personnalisable si tu as des éléments graphiques à modifier par la suite.
Oui, je parlais de cela.

Il n'existe pas de générateur de sprites plus fexible ? Qui permette par exemple de l'horizontal et de la vertical.

Merci !
Pardon, je me suis mal exprimé.

Je voulais dire un générateur de sprite où l'on puisse gérer sur le même sprite un placement horizontal et vertical.

Après avoir tester plusieurs générateurs, il me semble que la solution soit de le faire à la main (chronophage).

Bonne journée,

Raphaël
Ok, je n'ai jamais testé mais tu peux sans doute créer 2 sprites (l'un horizontal et l'autre vertical selon tes besoins) et les assembler ensuite pour n'obtenir qu'une seule image.

Personnellement, je fais mes sprites à la main car j'y apporte souvent des modifs. Une fois réalisés, tu as plus de flexibilité et tu peux les modifier à ta guise.

En revanche, si l'idée c'est d'utiliser la même image de façon verticale et horizontale (pour un picto par exemple), pas d'autre solution que la décliner dans les 2 sens.

Bonne journée.
Le côté chronophage que je vois dans les sprites à la main, c'est de calculer les positions ! Tu as une méthode rapide ?
J'utilise Firebug pour calculer les positions. C'est artisanal, mais avec l'expérience çà peut être assez rapide notamment avec l'aide du pavé numérique et des flèches directionnelles pour récupérer la position exacte et la copier dans ta CSS. Si le sprite contient énormément d'images, tu peux utiliser la grille et les règles de Photoshop pour être encore plus efficace.

Bonne journée.