Team-Masters.com
Que du Gratuit pour Webmasters
Une scrollbar aux couleurs de votre site
Vous disposez d’Internet Explorer 5.5 ou plus et en surfant, vous avez remarqué que certains sites, comme celui-ci, ont leurs barres de défilement (scrollbar) agrémentées de couleurs assorties au site que vous visitez.
Vous aimeriez bien appliquer aussi cet effet à vos pages. Soit. Mais cette stylisation ne fonctionne qu’avec Internet Explorer 5.5 ou plus, qui bien que concurrencé par d’autres navigateurs, reste quand même celui le plus utilisé sur le Net.
Le code qui permet de donner du style à vos barres de défilement offre la possibilité d’appliquer les couleurs que vous voulez aux différents éléments qui la composent, comme sur l’illustration suivante :
- face-color : définit la couleur du dessus des boutons et de l’ascenseur. C’est en quelque sorte la couleur principale, celle qui est le plus visible.
track-color : c’est la couleur du fond de la barre, sa couleur d’arrière-plan. En général elle est plus claire que celle du face-color.
arrow-color : c’est la couleur des flèches du curseur de la scrollbar
shadow-color : c’est la couleur sombre du relief des boutons et de l’ascenseur. Elle concerne les bords droit et bas de la barre et des curseurs.
highlight-color : Elle définit les couleurs des bords gauche et haut.
3Dlight-color : c’est la couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés (ça va ? pas trop dur ?). Sert à donner un effet 3D.
darkshadow-color : c’est la couleur (sombre) du relief des boutons quand ceux-ci ne sont pas enfoncés ;
Vous pouvez donc, pour donner du style à vos barres de défilement jouer sur ces 7 paramètres. Pour que le style des scrollbars soit pris en compte, il faut en fait déclarer ses propriétés comme faisant partie du corps de votre page, c’est-à-dire appliquer les style à la balise HTML body.
Le code suivant s’insère entre les balises head de vos pages :
<head>
<style type="text/css">
body {
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #FF8C00;
scrollbar-highlight-color: #FF8C00;
scrollbar-track-color: #FAEBD7;
scrollbar-arrow-color: #FFA500;
scrollbar-3dlight-color: #FF8C00;
scrollbar-darkshadow-color: #FF8C00;
}
</style>
</head>Et puis ça donnera un truc comme ça :
Si vous avez plusieurs pages, il vaut mieux alors mettre la définition du style précédent dans une feuille de style externe.
Conseil : modifiez un à un chaque propriété et observez les effets afin de trouver votre style final.
C’est toutoutoutoutout !!!
26 février 2005
22 menus verticaux en CSS prêts à l’emploi
Un menu horizontal bien souligné
Un menu vertical avec un effet bouton en CSS
Un menu horizontal souligné au passage de la souris en CSS
Une barre de pagination tout en CSS
Un menu horizontal en CSS avec une barre de séparation
Un menu vertical hiérarchisé en CSS
Un menu vertical aux effets agréables en CSS
CSS : Un menu vertical en 3D
Créez un menu vertical avec effet de rollover en CSS
