Créateur de sprites CSS pour sélectionner des zones et leurs positions
Créez des classes CSS pour les différentes images d’une planche de sprites existante. Déplacez ou redimensionnez chaque sélection à l’aide des poignées et gérez les sprites nommés dans la liste. Copiez ou téléchargez tout le CSS sous l’éditeur.
Chargement de l'outil…
Qu’est-ce qu’un sprite CSS ?
Une planche de sprites réunit plusieurs petites images dans un seul fichier. Le CSS affiche une zone à la fois en définissant la largeur, la hauteur et la position de l’arrière-plan d’un élément. Cet outil aide à mesurer ces zones et à écrire les règles correspondant à une planche existante ; il ne rassemble pas des images séparées dans une nouvelle planche.
Utiliser le CSS généré
L’outil génère une classe avec la largeur, la hauteur et les décalages négatifs de l’arrière-plan correspondant à la sélection. Appliquez-la à un élément, par exemple <span class="my-icon" aria-hidden="true"></span> pour une icône décorative. Conservez les libellés utiles dans le texte voisin ou fournissez un nom accessible lorsqu’une icône est le seul contenu d’un contrôle.
L’image doit conserver ses dimensions d’origine en pixels pour que les coordonnées générées correspondent. Cet outil sélectionne des zones dans une planche que vous possédez déjà ; il n’assemble pas des fichiers séparés et ne modifie pas l’image d’origine. Utilisez des images statiques pour un résultat prévisible.
Exemple CSS et HTML
Pour une icône de 32 par 32 pixels dont le coin supérieur gauche se trouve à X = 64 et Y = 0, utilisez une position d’arrière-plan de -64px 0px. Adaptez le nom de classe et le chemin de l’image à votre planche.
.icon-home {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("../images/sprites.png");
background-repeat: no-repeat;
background-position: -64px 0px;
}
Utilisez la classe à côté d’un libellé visible. Dans cet exemple, l’icône est décorative, car le lien contient déjà du texte :
<a href="/">
<span class="icon-home" aria-hidden="true"></span>
Home
</a>
Comment utiliser cet outil
- Essayez l’exemple ou choisissez Charger une image. L’exemple de 503 par 304 pixels commence avec une sélection de 75 par 75 à X = 175 et Y = 75. Pour utiliser votre planche, sélectionnez Charger une image, avant les commandes Ajuster/100%, et confirmez le remplacement. Les images PNG, JPEG et WebP peuvent atteindre 10 Mo, 8192 pixels par côté et 16 millions de pixels au total. Chaque planche chargée commence avec un sprite.
- Ajustez sa zone. Faites glisser l’intérieur du rectangle pour le déplacer ou utilisez ses huit poignées de bord et de coin pour le redimensionner. Faites glisser à l’extérieur pour remplacer la zone du sprite sélectionné. Les coordonnées, la liste et le CSS se mettent à jour ensemble.
- Gérez la liste des sprites. Ajouter un sprite crée et sélectionne un sprite de 75 par 75 pixels, ou plus petit si la planche est plus petite. Renommer change le nom de classe CSS du sprite sélectionné. Supprimer le retire ; le dernier sprite ne peut pas être supprimé. Sélectionnez une ligne de la liste pour retrouver sa zone et la modifier.
- Définissez le chemin de l’image si nécessaire. Dépliez Options sous l’image dans la colonne de gauche et renseignez Chemin de l’image dans le CSS, relatif à votre feuille de style, par exemple
../images/sprites.png. - Utilisez le CSS complet ci-dessous. Sélectionnez Copier le CSS ou Télécharger le CSS pour récupérer les règles de tous les sprites de la liste. Publiez l’image d’origine au chemin configuré et conservez ses dimensions.
Taille de l’aperçu et coordonnées précises
Ajuster affiche toute la planche dans la zone d’aperçu. 100% affiche les pixels d’origine, avec des barres de défilement horizontale et verticale si nécessaire, pour faciliter l’ajustement de petites zones. Sélectionner une ligne de la liste rend sa zone visible à 100%.
À côté de l’aperçu, Position indique X et Y, et Dimensions indique la largeur et la hauteur. Cliquez sur une valeur soulignée de pointillés, ou activez-la au clavier, pour la modifier. Appuyez sur Entrée pour terminer ou sur Échap pour rétablir la valeur précédente. Toutes les valeurs utilisent les pixels de l’image d’origine. X et Y partent du coin supérieur gauche. Pour une icône de 32 par 32 à X = 64 et Y = 0, les valeurs sont 64, 0, 32 et 32.
Lorsque la planche a le focus, les touches fléchées déplacent la sélection d’un pixel ; maintenez Maj pour la déplacer de dix pixels. Échap annule un glissement en cours. Maj avec un glissement commence un nouveau rectangle même à l’intérieur de la sélection actuelle. Les champs numériques permettent également tous les déplacements et redimensionnements.
Noms et sélections enregistrées
Chaque modification valide des coordonnées est immédiatement conservée dans l’élément sélectionné. Des coordonnées incorrectes affichent une erreur et conservent le dernier CSS valide de cet élément jusqu’à leur correction. La liste accepte jusqu’à 100 sprites, avec des noms de classes uniques commençant par une lettre ou un tiret bas, puis composés de lettres, chiffres, tirets bas et traits d’union, sur 100 caractères maximum.
Les sélections ne sont conservées que pour la session en cours. Charger une image affiche un avertissement avant d’ouvrir le sélecteur de fichiers, car remplacer l’image remplace aussi tous les sprites et le CSS généré. Annuler l’avertissement ou le choix du fichier préserve votre travail ; un fichier incorrect ne le remplace pas. Une image valide commence une nouvelle liste avec un sprite par défaut ; recharger la page revient à l’exemple. Copiez ou téléchargez le CSS avant de remplacer la planche ou de quitter la page.
Vos données restent dans votre navigateur
Cet outil traite vos données sur votre appareil. Le texte, les fichiers ou les mots de passe saisis et les résultats produits ne sont envoyés ni à nos serveurs ni à un autre serveur.
Le chargement des pages et de leurs ressources génère des requêtes. En production, les pages chargent aussi Google Tag Manager, Cloudflare Web Analytics et les publicités AdSense ; le code des outils ne transmet ni vos saisies ni vos résultats aux services de mesure ou de publicité. Consultez notre politique de confidentialité.
Pour examiner les requêtes pendant l'utilisation de l'outil, ouvrez les outils de développement de votre navigateur, puis l'onglet Réseau. Faites un essai avec des données fictives.
Consultez Comment examiner les requêtes réseau dans Chrome, Firefox, Edge et Safari.
Pour aller plus loin
- MDN : implémenter des images sprites en CSS - comment la taille des éléments et la position de l’arrière-plan sélectionnent une zone, et dans quels cas les sprites sont utiles.