Cet outil vous permet d'automatiser le processus de génération des Sprites CSS. Fournissez seulement un fichier ZIP contenant au moins 2 images (GIF, PNG ou JPG) et il génère l'image Sprite ainsi que les règles CSS associées pour afficher unitairement chaque image composant le Sprite.

Options

L'outil possède des options que vous pouvez configurer pour modifier les caractéristiques de l'image Sprite générée ainsi que les CSS associés afin de mieux répondre aux spécificités de votre site web. Ces options sont détaillées ci-dessous :

Redimensionner les images sources

Largeur et Hauteur
Si la largeur et/ou la hauteur sont inférieur à 100% les tailles des images sources seront réduites avant d'être copiée dans l'image résultat. L'outil ne permet pas d'indiquer une valeur supérieure à 100% car augmenter la taille des images implique une baisse de la qualité des images produites. La valeur par défaut pour la largeur et la hauteur est 100% (pas de redimensionnement).

Images dupliquées

Ignorer les images dupliquées
Les images dupliquées sont toutes copiées dans l'image résultat et une règle CSS est créée séparément pour chaque duplicata.
Supprimer les images dupliquées mais combiner les classes en une seule
L'outil compare le contenu des images en utilisant une fonction de hachage MD5 pour déterminer quelles sont les images dupliquées dans le fichier ZIP. Ces duplicata sont interdits donc ignorés et les règles CSS sont regroupées en une seule et unique règle.

Options du Sprite généré

Espacement horizontal
Il détermine l'espacement horizontal entre les lignes d'images du fichier image résultat. Cette valeur doit être assez large pour prendre en compte le bug de répétition de fond de Safari. Nous vous suggérons de laisser le paramètre par défaut.
Espacement vertical
Il détermine l'espacement vertical entre les images consécutives. Cette valeur doit être assez large pour prendre en compte la possibilité d'augmenter les tailles de polices par les utilisateurs. En général, nous vous recommandons que la conception de votre site supporte que les visiteurs puissent accroître leur taille de police à deux reprises avant que l'image de fond suivante soit atteinte et devienne visible dans la séquence des images.
Couleur de fond
Positionne la couleur de fond de l'image résultat. Ce champ doit être une valeur de couleur exprimée en hexadécimal sur 6 digits. S'il reste blanc et que le format de sortie est GIF ou PNG alors le fond sera transparent.
Format du fichier Sprite
Supporte les formats GIF, PNG et JPG. Les formats GIF et PNG peuvent avoir des fonds transparents. La valeur par défaut est PNG.

Options des CSS générés

Préfixe de CSS
Chaque règle CSS de position générée est préfixée avec le texte saisi. Le préfixage d'id et de sélecteur de classes est supporté. Les caractères suivants sont autorisés - a-z, 0-9, _, -, # et .
Expression régulière du nom de fichier Sprite
N'importe quelle expression régulière valide peut être utilisée. Wrap rounded brackets around the section of the match you'd like to be extracted from the filename of each image. Ils seront utilisés comme base de positionnement des noms de classe.
Préfix de classe
Le texte entré est préfixé devant chaque nom de classe. Il particulièrement important de renseigner ce champ lorsque les noms de classes générés doivent commencer par autre chose qu'un chiffre afin d'être un sélecteur valide (comme cela est défini par les recommandations du W3C). Les caractères suivants sont autorisés - a-z, 0-9, _ et -. Le préfixe saisi ne peut pas commencer par un chiffre.
Suffixe de CSS
Le texte entré est suffixé à la fin de chaque règle de CSS. Le "Suffixe de CSS" autorise les mêmes caractères que le "Préfixe de CSS".