Sprite CSS : Afficher vos Profils dans 50 Réseaux Sociaux
La méthode décrite ici est appelée Sprite CSS, par analogie avec la méthode utilisée par les premiers jeux vidéos (Sprite en anglais : le lutin, le farfadet). Ces jeux affichaient un personnage animé à partir de pixels pris sur une seule image, par souci d'économie de ressources.
La base de cet article est un Plugin pour Wordpress, Cute Profiles : Free WordPress Plugin To Show Vertically Floating Social Profiles.
Le CSS background-position
La clause CSS background-image permet de définir l'image de fonds d'un bloc. La position de cette image est fixée par background-position. Nous allons utiliser 2 coordonnées, l'axe horizontal et l'axe vertical en pixels pour afficher une partie de l'image de fonds.
Partons d'une image de 120 x 90 pixels, et divisons cette image en 4 cadrans (haut / bas et gauche / droite).
Un lien avec une image
En utilisant la clause background-image nous pouvons créer un lien sur une image. Le tag a (ancre) doit normalement contenir le texte du lien. Nous supprimons l'affichage du lien par la clause CSS display: none;
div.test1
{
border: 0px;
margin: 0px;
padding: 0px;
}
div.test1 a
{
display: inline-block;
width: 60px;
height: 45px;
padding: 0px;
margin: 0px 0px 4px;
background-image: url(http://www.liens-du-vin.ch/ascreen.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
div.test1 a.haut_gauche
{
background-position: 0px 0px; /* CADRAN HAUT GAUCHE */
}
div.test1 a.haut_droite
{
background-position: -60px 0px; /* CADRAN HAUT DROITE */
}
div.test1 a.bas_gauche
{
background-position: 0px -45px; /* CADRAN BAS GAUCHE */
}
div.test1 a.bas_droite
{
background-position: -60px -45px; /* CADRAN BAS DROITE */
}
div.test1 a span
{
display: none; /* SUPPRIMER LE TEXTE DU LIEN */
}
Le code HTML, place les liens sur les 4 cadrans, dans un bloc div :
<div class="test1">
<a class="haut_gauche" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Gauche"><span>Liens Du Vin<</a>
<a class="haut_droite" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Droite"><span>Liens Du Vin</span></a>
<a class="bas_gauche" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Gauche"><span>Liens Du Vin</span></a>
<a class="bas_droite" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Droite"><span>Liens Du Vin</span></a>
</div>
Ce qui donne le résultat suivant :
Haut Gauche (0 0) Haut Droite (-60 0)
Bas Gauche (0 -45) Bas Droite (-60 -45)
Liens Du Vin Liens Du Vin
Changer le fonds au survol
Nous allons utiliser la une peudo-classe CSS a:hover pour modifier le fonds du lien au survol de celui-ci.
Affichons le cadran Haut Gauche sur le lien, et affichons le cadran Bas Droite lorsque le curseur survole le lien. Il suffit de définir la clause CSS hover (à placer après la clause a:link) :
div.test1 a.haut_gauche:hover
{
background-position: -60px -45px;
}
En pratique, l'image change pour le cadran Bas Droite au survol par la souris :
Liens Du Vin
La Mise en oeuvre avec les icônes de Profil
L'image *.png des Profils des Réseaux Sociaux (50 icônes) ainsi que la feuille de style complète pour toutes les icônes peuvent être obtenues à l'adresse du Plugin Wordpress citée plus haut.
L'image de base comprend 50 icônes de 32 pixels, sur 2 rangées. La première rangée est l'image du lien, la deuxième comporte l'image à afficher au survol du lien.
Les coordonnées de background-position pour le lien
Par exemple, nous voulons afficher comme lien, l'icône no 3 de la première rangée (facebook). Le CSS du lien sera :
div.profil_sprite a.facebook
{
background-position: -64px 0px;
}
En généralisant, le lien pour l'icône n, -32 * (n - 1). Par exemple, l'icône YouTube (no 9, donc -32 * (9-1) = -256) :
div.profil_sprite a.youtube
{
background-position: -256px 0px; /* ICONE 9 : -32 * (9 - 1) */
}
Les coordonnées de background-position pour le survol de la souris
Nous devons changer la coordonnée y de background-position, en nous déplaçant de 32px vers le bas. Pour Facebook (icône no3) :
div.profil_sprite a.profil_facebook:hover
{
background-position: -64px -32px;
}
Et pour YouTube (icône no 9) :
div.profil_sprite a.youtube:hover
{
background-position: -256px -32px;
}
Un exemple complet avec mes profils
Le CSS :
div.profil_sprite /* LE BLOC DIV CONTENANT LES LIENS */
{
text-align: center;
border: 0px;
margin: 0px;
padding: 0px;
}
div.profil_sprite a /* LE LIEN DANS LE BLOC DIV */
{
width: 32px;
height: 32px;
padding: 0px;
margin: 0px 0px 4px;
background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
/* LES ICONES QUI DOIVENT FIGURER */
div.profil_sprite a.profil_twitter
{
background-position: -32px 0px; /* ICONE NO 2 */
}
div.profil_sprite a.profil_twitter:hover
{
background-position: -32px -32px; /* ICONE NO 2 */
}
...
...
div.profil_sprite a.profil_google
{
background-position: -160px 0px; /* ICONE no 6 */
}
div.profil_sprite a.profil_google:hover
{
background-position: -160px -32px; /* ICONE no 6 */
}
.profil_sprite span
{
display: none; /* SUPPRIMER LE TEXTE DU LIEN */
}
La barre horizontale de mes Profils :
Afficher la barre des profils verticalement
Il suffit de définir les liens comme étant display: block;
div.profil_sprite_v a
{
display: block;
width: 32px;
height: 32px;
padding: 0px;
margin: 0px 0px 4px;
background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
Plus d'informations
Une introduction aux Sprite CSS, par alsacréations.
Jouer avec l'opacité et la transparence pour ses images.
Utiliser les filtres d'opacité pour ses images.
Jeu de briques
Snake
Pacman
Bubble