Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2010/10/17

Profils des Réseaux Sociaux avec Sprite CSS

Profils des Réseaux Sociaux avec Sprite CSS

Sprite CSS est une technique permettant d'utiliser une seule image pour afficher plusieurs icones ou effets graphiques


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).

Image de fonds - 120 x 90


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)
Liens Du VinLiens Du Vin
Bas Gauche (0 -45)Bas Droite (-60 -45)
Liens Du VinLiens Du Vin



Changer le fonds au survol

Nous allons utiliser 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 :



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.

Profils sur 50 Réseaux sociaux


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 :



Le html de l'exemple :


<div class="profil_sprite">
<a href="URL profil Google" title="Profil Google" class="profil_google"><span>Profil Google</span></a>
...
</div>



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.

Colorer le Bouton Partager de Blogger.

Enregistrer un commentaire


Rechercher sur le Blog de Prac avec Google CSE