Sprite Cow et les sprite css deviennent un jeu d'enfant

Classé dans css

sprite cow

Qui n'a pas galéré à calculer le css d'une sprite ? Sprite cow est la solution à toutes prises de tête...

Non, une sprite n'est pas une boisson gazeuse !

Historiquement, les sprites sont nées avec les jeux vidéos afin de simplifier les objets à afficher. On peut les définir comme un élément graphique transparent que l'on peut déplacer à l'écran. On les retrouve aussi dans nos ordinateurs personnels. Le curseur de la souris en est le meilleur exemple.

En css, une sprite est un fichier, dont le fond est généralement transparent, qui regroupe plusieurs images. L'intérêt est de limiter l'impact de leur chargement par le navigateur et d'économiser de la bande passante en diminuant le nombre de requêtes HTTP.
C'est le css qui se charge d'en afficher telle ou telle partie grâce à des règles précises. Les web-designers les utilisent souvent pour les icônes d'un site (changement d'état par exemple). Bien que le principe soit facile à comprendre, la mise en situation est souvent moins aisée.

Exemple d'une sprite (icones famfamfam)

Des outils pour nous faciliter la vie

L'utilisation intensive de cette technique par les designers et le fait bien connu que les programmeurs soient des fainéants ont permis l'apparition de divers outils permettant de générer les règles css nécessaires à un affichage précis des sprites.

Sprite cow en est un exemple qui, je pense, vaut le détour. Son utilisation est on ne peut plus simple. Il suffit d'importer la sprite sur le site et de sélectionner chaque élément pour voir s'afficher la règle à utiliser. De plus, cela fonctionne également lorsque le fond n'est pas transparent.

Ce site est tellement simple à utiliser qu'il n'y a pas grand chose à ajouter. Allez l'essayer, vous ne pourrez plus vous en passer.

Dans le même esprit, on peut citer Spritebox qui est tout aussi simple d'utilisation.

Écrire un commentaire

*


*

 Se rappeler de moi sur ce site

*
Quelle est la dernière lettre du mot bwhyql ? :