Css-sprit.es : technique css et image
Par Laurent | 17.09.09 08:27 | 0 commentaire(s) | programmation
Voici un site qui va vous permettre de réaliser un CSS Sprite très facilement.
Mais d'abord qu'est ce que le Css sprite ?
Succinctement, je pourrais dire que cette technique permet d'utiliser une seule image(comportant plusieurs éléments...) pour réaliser différents affichages et donc servir à diverses choses.
Exemple :
Et bien la technique du css sprite, permet en définissant précisément les valeurs dans le codage css de background-position couplé à d'autres code css, d'utiliser une seule et même image mais pour divers besoins (rollover et d'autres choses...)
Ainsi avec cette image exemple, je n'afficherais qu'une image soit celle du haut soit celle du bas, en fonction de mon codage css et du survol ou non de la souris...par exemple.
Je vais illustrer par un exemple avec une autre image.
Pour celà je vais utiliser le site Css-sprit.es
Voici les étapes :
1) je pars de cette image, et ainsi je vais sur le bouton Browse, puis je charge une image
2) je choisis JPEG pour Image File Type
3) je choisis Rollover Effect: Desaturate
4) puis je vais sur le bouton Create CSS Sprite!
Ainsi apparait (sur la partie droite) une seule et même image (représentant l'image de base avec en dessous l'image qui a été désaturé (effet donné) ), le site a "collé" l'image de base avec l'autre image donnant ainsi une seule image au lieu de 2.
C'est là que réside tout l'intérêt du CSS SPRITE
On va donc s'en servir pour afficher 2 états :
-lorsque la souris n'est pas dessus
-lorsque la souris est dessus (hover)
appelé communément le rollover..
Le site génère un Preview qui montre l'effet rollover (sur la gauche sur le site : 1 image s'affiche puis une autre après survol de la souris), et sur la droite il me suffit de faire enregistrer sous, pour récupérer l'image sur mon bureau(correspondant à l'image qui affiche les 2 états)
Puis ensuite, je récupère le code css et html nécessaire pour créer cette effet.
Voici le code généré donc le css est placé entre la balise <style type="text/css"> ... </style> et le code html entre la balise <body>...</body>
Voici l'exemple que j'ai généré
(l'image css-sprite-exemple.jpg à une hauteur de 750px pour une largeur de 500px.Vous constaterez que dans le code css on met comme hauteur 375px soit la 1/2 de l'image pour ainsi faire fonctionner la technique css sprite)
Vous pouvez ainsi constater qu'avec une seule image et du css et de l'html, on peut créer un superbe effet, juste en changeant les propriétés background-position : valeur1 valeur2
avec valeur1 la valeur horizontale en pixels et valeur2 la valeur vertical en pixels.
En regardant le code css de sprite_0 on constate que la position du background est de -0px -375px; car on ne veut pas afficher le bas de l'image qui est de hauteur 375 px ainsi on se place sur l'image d'en haut.Et pour le code de sprite_0:hover (en survol de la souris), on se place en background-position : -0px 0px; pour n'afficher que le bas...
Vous pourrez donc aussi vous amuser à créer une seule image globale avec toutes les icones,boutons, bordures.. que l'on veut définir dans son site et n'avoir qu'à gérer un seul fichier image...reste juste à coder la partie css qui fera appel à chaque portion d'image , grâce à la propriété background-position...et à l'appliquer dans son code html...
Par exemple voici une image avec de nombreux éléments qui peuvent être placés sur une page web avec du code css...
Le css sprite trouve beaucoup de déclinaison dans le monde du web de nos jours...
Cette astuce est très pratique car on peut diviser certains temps de chargement de page.
derniers commentaires