yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Farbige Scrollbalken mit CSS

So ist es ganz einfach, farbige Scrollbalken mit CSS zu erstellen.

Das Body-Tag hat Attribute, mit denen sich die Scrollbars einfärben lassen. Leider werden farbige Scrollbalken jedoch nur vom Internet Explorer ab Version 5.5 unterstützt.

Um den ganzen Scrollbalken einzufärben, gibt es das scroll-base-color Attribut. Hier mal ein kleines Beispiel:

Code:
<html>
<head>
<style type="text/css">
body {
scrollbar-base-color: red;
}
</style>
</head>
<body>
Hier kommt der Seiteninhalt
</body>
</html>

Hiermit würde also die gesamte Scrollbar rot eingefärbt werden.

Es gibt noch folgende Attribute, um Scrollbars ein anderes Aussehen zu geben:

scrollbar-face-color bestimmt die Farbe des Scrollbalkens
scrollbar-highlight-color bestimmt die Farbe der höhergelegenen Elemente.
scrollbar-shadow-color bestimmt die Farbe der tiefergelegenen Elemente.
scrollbar-3dlight-color bestimmt die Farbe seitlich liegender Elemente.
scrollbar-arrow-color bestimmt die Farbe der Pfeile
scrollbar-track-color bestimmt die Farbe der Scrollbalken Schiene
scrollbar-darkshadow-color bestimmt die Farbe von liegenden Elementen.

Und zum Schluss noch ein Beispiel:
Code:

<html>
<head>
<style type="text/css">
body {
scrollbar-face-color: blue;
scrollbar-highlight-color: black;
scrollbar-shadow-color: white;
scrollbar-3dlight-color: white;
scrollbar-arrow-color: white;
scrollbar-track-color: white;
scrollbar-darkshadow-color: black;
scrollbar-base-color: black;
}
</style>
</head>
<body>
Hier ist der Inhalt
</body>
</html>




Weiterführende Links:
Mehr zu Css

Geschrieben von Christian am 12.04.2005 (7804x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Dumm nur, dass das W3C das als Fehler ansieht!
Geschrieben von Area51