Farbige Scrollbalken

Farbige Scrollbalken werden zur Zeit ausschliesslich vom InternetExplorer ab der Version 5.5 angezeigt.
Andere Browser stellen die Scrollbalken jedoch ganz normal dar, so dass dieser Effekt von einigen WebDesignern gern angewendet wird um den Benutzern des IE etwas Abwechslung zu bieten.

Die Einbindung in den Quelltext kann entweder im head-Bereich als auch im öffnenden body-tag erfolgen.

kommen wir gleich zum Quelltext selbst:

style="scrollbar-base-color:#E9FCFF;
scrollbar-face-color:#ffffe9;
scrollbar-track-color:ivory;
scrollbar-shadow-color:#990033;
scrollbar-dark-shadow-color:#3333ff;
scrollbar-arrow-color:#66ffcc;
scrollbar-3d-light-color:#99cc66;
scrollbar-highlight-color:#E9FCFF"

obiger Code erzeugt genau die Scrollbars, wie ich sie verwende. Die Bedeutung der einzelnen Elemente setzt sich folgendermassen zusammen:
scrollbar-base-color der eigentliche Scrollbalken sowie das obere und untere Quadrat
scrollbar-face-color Farbe für die Oberfläche
scrollbar-track-color Farbe für den Hintergrund der Scroll-Leiste, der beim Verschieben sichtbar ist
scrollbar-shadow-color Farbe für den Rand unten und rechts
scrollbar-dark-shadow-color die Schattenfarbe
scrollbar-arrow-color Farbe für die Verschiebepfeile
scrollbar-3d-light-color die Schattenfarbe
scrollbar-highlight-color Farbe für den Rand oben und links

 

Einbindung in den head-Bereich:
<head>
<title>scrollbars</title>
<style type="text/css">
body{
scrollbar-base-color:#E9FCFF;
scrollbar-face-color:#ffffe9;
scrollbar-track-color:ivory;
scrollbar-shadow-color:#990033;
scrollbar-dark-shadow-color:#3333ff;
scrollbar-arrow-color:#66ffcc;
scrollbar-3d-light-color:#99cc66;
scrollbar-highlight-color:#E9FCFF;
}
</style>
</head>

Einbindung in den body-tag:
...
<body style="scrollbar-base-color:#E9FCFF;
scrollbar-face-color:#ffffe9;
scrollbar-track-color:ivory;
scrollbar-shadow-color:#990033;
scrollbar-dark-shadow-color:#3333ff;
scrollbar-arrow-color:#66ffcc;
scrollbar-3d-light-color:#99cc66;
scrollbar-highlight-color:#E9FCFF">
Dokumentenkörper
</body>
...


©Copyright by Andreas Jahnsmüller.Das Kopieren oder Weitergeben dieser Seiten ist urheberrechtlich geschützt.