Comment implémenter un effet d’ascenseur pour vos boutons de flux sociaux en CSS.


Il s’agit d’une petite astuce qui permet de personnaliser le thème, notamment vos boutons d’abonnement aux différents réseaux sociaux. Le but de ce tutoriel est d’appliquer un boost CSS à votre bouton.

Si vous voulez voir à quoi ressemble le bouton Mon abonnement en haut de cette page avant de commencer. J’ai supprimé le bouton d’abonnement dans la barre latérale au profit d’un bouton plus petit dans l’en-tête du blog.

Puis au passage de la souris, l’image sera remplacée par les couleurs officielles du réseau social.Par exemple ici flux RSS.

Le plus dur est de trouver des icônes qui vous plaisent et qui correspondent bien à la charte graphique de votre blog.

Habituellement, j’utilise le site Deviantart pour trouver des images et/ou des icônes de qualité et originales.

Pour ce tutoriel, j’ai choisi l’icône Somacro. Vous pouvez télécharger le package à partir de l’URL suivante : http://vervex.deviantart.com/art/Somicro-40-Free-Social-Media-Icons-257232757

Après avoir choisi les icônes, vous devez les modifier pour effet de transitionPar exemple, pour mon blog, j’ai converti l’icône en gris-noir. Vous pouvez facilement le faire avec Photoshop, par exemple.

Ouvrez l’image dans Photoshop, puis Créer un calque.

choisir Copie de niveau 1 alors entrez Image -> Réglages -> Noir & Blanc.

Ensuite, jouez avec différentes nuances de couleurs jusqu’à ce que vous trouviez celle qui vous convient.

Créez maintenant une autre image avec les dimensions suivantes : 34X64.

Copiez et collez l’image noire. L’image affichée en premier doit être placée en haut. Il faut le coller dessus.

A Voir  4 meilleurs décodeurs TNT de 2022

Ensuite, faites de même avec l’image d’origine et placez-la là.

enregistrer votre travail dans Format PNG et copiez l’image dans le répertoire images du thème. Bien sûr, si vous utilisez WordPress.

Voici maintenant le code à ajouter au fichier styles.css Votre thème (c’est à vous d’adapter chaque image du bouton) :

[css]

.icônes de médias sociaux {
flottant : oui ;
marge supérieure : 15 px ;
}
a.social-media-icon {
position d’arrière-plan : 0 0 ;
show : bloc en ligne ;
hauteur : 32px ;
marge droite : 6 px ;
débordement caché;
texte-retrait : -1000px ;
Transition : position d’arrière-plan 0,25 s pour atténuer les 0 s ;
largeur : 32px ;
}
a.social-media-icon :hover{
position d’arrière-plan : 0-32 px ;
}
/** Lien vers l’image – à ajuster **/
. Facebook {
image de fond : url(« image/facebook.png »);
}
. Twitter {
image de fond : url(« image/twitter.png »);
}
.Google Plus {
image de fond : url(« image/google-plus.png »);
}
[/css]

Maintenant, c’est le code HTML à insérer dans une de vos pages.Par exemple, pour mon blog, je choisis de Titre.

[html]

Facebook
Twitter
Google+

[/html]

Ici, quelques ajustements au code CSS sont certainement nécessaires, mais rien de mal.

Vous pouvez télécharger mon pack d’icônes prêt à l’emploi en cliquant sur ce lien : Pack d’icônes de médias sociaux.

Source : Merci à Florent de restezconnectes.fr pour ces codes sources.

c’est tout.