Forum de Graphisme - Best of Graph'
Les inscriptions au forum sont maintenant fermée, en effet, nous ne trouvons pas juste de faire s'inscrire des membres pour rien, vu que le forum en dans un état actuellement passif.
Merci, bien à vous!
BOG.

Remarque : la partie publique du forum, tutoriels, ... restent actifs.

Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous


Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

1 Les sprites en CSS le 7/5/2011, 06:55

Arkantos22

avatar
Administrateur
Bonjour,

Nous allons voir comment utiliser les sprites en CSS.

C'est quoi "sprites" ?

Les sprites CSS sont une façon de se servir d'une seule image pour en affichant plusieurs.
Ce qui est bien pratique quand on veut, par exemple, voir un effet de survol sur une image.

Voici ce que nous allons réaliser dans ce tutoriel :

Passe la souris sur l'image :


Commençons !
Pour le moment, nous avons deux images distinctes.

et

Il va falloir les fusionner comme ceci.



Maintenant, nous allons créer la zone qui contiendra notre image fusionnée.

Code:
<div class="sprite"></div>

Dans votre fichier CSS, coller ensuite ce-code.

Code:
.sprite
{
   width: 136px; /* A modifier en fonction de la largeur de votre image */
   height: 258px; /* Afficher seulement la "première" image, également à modifier si vous le souhaitez */
   display: block;
   background: url("???") no-repeat; /* URL de votre image */
        background-position : left top; /* Aligné l'image en haut à gauche */
}

C'est bien mais pour le moment il ne se passe rien au survol...
Collez donc ce bout de code de votre CSS.

Code:
.sprite:hover
{
        background-position : left bottom; /* Aligné l'image en bas à gauche */
}

Et voilà, votre code devrait fonctionner, tester-le. Wink

_____________


[center]

Fondateur & Administrateur de Best of Graph'
»Ma galerie sur BoG«

bestofgraph@gmail.com - Envoyer un message privé

2 Re: Les sprites en CSS le 8/5/2011, 22:26

Grimpow

avatar
Membre
Ce code-ci ne serait-il plus simple ?
Code:
<img width="largeur" height="hauteur" alt="texte de remplacement" src="URL image sans survol" class="sprite" />
Code:
 .sprite:hover { background-image:url("URL image avec survol");}

3 Re: Les sprites en CSS le 9/5/2011, 04:19

Arkantos22

avatar
Administrateur
Ça revient au même.
J'ai préféré mettre TOUT le CSS dans le fichier CSS et pas directement dans le xHtml. Wink

_____________


[center]

Fondateur & Administrateur de Best of Graph'
»Ma galerie sur BoG«

bestofgraph@gmail.com - Envoyer un message privé

4 Re: Les sprites en CSS le 9/5/2011, 05:41

Grimpow

avatar
Membre
Ben, même si on met tout le css dans un fichier à part, je trouve ma méthode plus simple et moins casse-tête ^^

5 Re: Les sprites en CSS le 9/5/2011, 05:59

Arkantos22

avatar
Administrateur
Moins casse-tête au premier abord seulement :

Imagine que tu veux changer la hauteur, la largeur, ... et que une parties de ces info se trouvent de le CSS et l'autre dans le Html... (comme tu l'as fais).

Pire encore, tu as affiché ton sprite sur plusieurs pages distinctes !
C'est la que les ennuies commencent...

_____________


[center]

Fondateur & Administrateur de Best of Graph'
»Ma galerie sur BoG«

bestofgraph@gmail.com - Envoyer un message privé

6 Re: Les sprites en CSS le 11/5/2011, 01:50

Grimpow

avatar
Membre
Pas grave :
Code:
<div class="sprite"></div>
Code:
.sprite {
  background-image:url("URL image sans survol");}
  width:136px; // Largeur de l'image
  height:258px; // Hauteur de l'image
}
.sprite:hover {
  background-image:url("URL image avec survol");
}

7 Re: Les sprites en CSS le 11/5/2011, 02:24

Arkantos22

avatar
Administrateur
Dans ton code, il y auras un blanc car il y a deux images à chargées...
Tandis qu'avec les sprites il n'y a qu'une image. :smil7:

_____________


[center]

Fondateur & Administrateur de Best of Graph'
»Ma galerie sur BoG«

bestofgraph@gmail.com - Envoyer un message privé
Contenu sponsorisé


Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 

Optimisé pour Mozilla Firefox et Google Chrome
Tous droits reservés - Copyright 2011-2013