Les composants d'une scrollbar
Observe la magnifique barre de défilement à droite de ton navigateur, contemple les splendides couleurs windows (gris par défaut) et dis-toi que dans tes pages tu pourras faire pêter de la couleur ;-)
Si tu observes bien (j'n'en doute point), tu peux voir qu'il y a différentes couleurs. En fait il y a différents éléments qui portent les noms sympathiques suivants :
- le face : la couleur du dessus des boutons et de l'ascenseur, c'est ce qui est le plus visible. Mais ne néglige pas le reste !
- le track : c'est la couleur du fond de la barre, ça aussi c'est très visible ;
- le arrow (= flèche en French) : c'est la couleur des flèches ;
- le shadow (= ombre) : couleur sombre du relief des boutons et de l'ascenseur (donc on en déduit qu'il vaut mieux une couleur sombre) ;
- le highlight (= ce qui est brillant) : couleur claire du relief des boutons et de l'ascenseur ;
- le 3Dlight : c'est la couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés (ça va ? pas trop dur ?) ;
- le darkshadow (= ombre noire) : couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés ;
Si tu définis les couleurs du track, des arrows et de la face, les autres seront les couleurs par défauts de Windows. Pour éviter cela, un élément supplémentaire, le base permet de définir une couleur par défaut.
C'est-à-dire que si tu définis la base verte, les autres éléments auront une couleur dérivée du vert (plus claire pour le 3Dlight et le highlight, plus foncée pour le shadow et le darkshadow), à moins que tu ne définisses explicitement une de ces couleurs.
Comment ça se code ce bazar ?
C'est (relativement) simple. C'est une feuille de style. Voici un exemple. Fais un copier-coller dans un fichier testcouleurs.htm, et lance le dans le navigateur. Tu verras !
<html>
<head>
<style type='text/css'>
BODY
{
scrollbar-face-color: #006400;
scrollbar-shadow-color: #228b22;
scrollbar-highlight-color: #98fb98;
scrollbar-3dlight-color: #8fbc8b;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #eee8aa;
}
</style>
<title>Waouw je sais faire des scrollbars colorées !!!</title>
</head>
<body>
C'est pas beau hein ? ;-)
</body>
</html>
Les couleurs sont écrites en hexadécimal #RRVVBB (Rouge, Vert, Bleu). RR, VV ou BB peuvent aller de 00 à FF...
Le codeur pur et dur se fera un plaisir de modifier les valeurs à la main, puis d'actualiser sa page dans le navigateur à chaque modif, jusqu'à ce que ce soit harmonieux.
Comme tu n'aimes pas perdre de temps dans le développement, tu préfères utiliser un outil plus visuel. J'me trompe ? Non ! Alors va à au paragraphe suivant !
Fonctionnement de la page
Voici en résumé le fonctionnement de la page. Si tu ne veux pas savoir comment c'est codé à l'intérieur (tant pis pour toi!), voici quand même des explications pour t'en sortir ;-)
Télécharge le fichier http://iubito.free.fr/prog/scrollbar2.htm (une fois sur la page, fait Fichier > Enregistrer sous...) comme ça tu pourras l'exécuter depuis ton disque dur :)
Si tu ne veux pas une telle pourriture (vraiment ?) sur ton disk, click sur le lien...
- à droite tu choisis un preset, c'est-à-dire des jeux de couleurs tout prêts (si tu es assez curieux pour voir la page suivante, tu verra comment créer les tiens...)
- ...mais tu peux aussi choisir pour chaque élément une couleur en cliquant sur l'image à côté de chaque élément. A ce moment-là, une palette (le ColorPicker d'Aurélien) s'ouvre et tu peux choisir ta couleur. Tu peux aussi entrer une couleur dans la zone de saisie à gauche de l'image :)
- enfin, le gros bouton "Voir le résultat" ouvre une popup avec la scrollbar colorée et le code CSS à insérer dans la page HTML. Cette popup contient 2 boutons "Blanc" et "Noir" qui permettent de changer le fond de la page...
Enjoy !
