Dans cet article, nous allons utiliser le CSS pour personnaliser votre barre de défilement. Comme pour les styles sur les liens hypertextes (cf article N°10089), vous devrez insérer le code HTML qui suit entre les balises de vos pages web.
Ce code est très simple à manipuler puisqu'il vous suffira de remplacer les codes hexadécimaux des couleurs par ceux de votre choix. Pour mieux vous aider à comprendre ce script, une capture d'écran d'une barre de défilement est incluse dans cet article.
NB : Afin d'éviter toute erreur de fonctionnement, n'oubliez pas de placer un dièse (#) devant chaque code hexadécimal. Vérifiez également que vos codes hexadécimaux comportent bien 6 caractères (lettres et chiffres) après les avoir insérés dans le script.
Le code CSS pour personnaliser votre scrollbar
Ne copiez pas les //****// *
<style>
BODY
{
scrollbar-face-color:#E9E9E9;
scrollbar-arrow-color:#6699CC;
scrollbar-track-color:#E9E9E9;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color:#FFFFFF;
scrollbar-3dlight-color:#C0C0C0;
scrollbar-darkshadow-color:#C0C0C0;
}
</style>
Comment comprendre chaque élément du code CSS
NB : Les numéros entre parenthèses en fin de phrases correspondent à ceux figurant sur l'image !
: Ce sont les deux balises qui délimitent le script avec les accolades.
scrollbar-face-color:#E9E9E9; Cet attribut définit la couleur de la barre centrale qui est en mouvement lorsque l'on clique sur les flèches ou lorsque l'on utilise la molette de la souris. (6)
scrollbar-arrow-color:#6699CC; Ce morceau de code attribue une couleur aux deux flèches se trouvant aux extrémités de la barre de défilement. (2)
scrollbar-track-color:#E9E9E9; Cet attribut affecte une couleur à la barre verticale se trouvant en arrière-plan (derrière la Face) qui est de couleur gris clair par défaut. (4)
scrollbar-highlight-color:#000000; Le Highlight est l'attribut qui associe une couleur aux carrés entourant les 2 flèches (Arrows). (1)
scrollbar-shadow-color:#FFFFFF; Cette ligne du script affecte une couleur à l'ombre (Shadow) qui se trouve sur les bords des carrés des extrémités de la barre de défilement. (3)
scrollbar-3dlight-color:#C0C0C0; Le 3D-Light attribue une couleur à l'ombre qui se situe sur les bords gauche et haut de la barre centrale (Face). (5)
scrollbar-darkshadow-color:#C0C0C0; Celui-ci colorie les 2 ombres des bords droit et bas de la barre centrale. (7)
Conclusion et prochaines étapes
Voilà tout en ce qui concerne la personnalisation de la barre de défilement que vous pouvez désormais modifier avec vos couleurs.
J'espère que cet article vous aura été utile et vous donne rendez-vous pour de prochains sujets concernant le Webmastering.
N'hésitez pas à laisser vos commentaires sur ce sujet, car ils m'aident à améliorer mes articles si ces derniers ne vous satisfaisaient pas.
Site Internet : Webmaster-Debutant.com
E-Mail : [email protected]
Article(s) déjà réalisé(s) : Styles CSS sur les liens hypertextes !
