CSS
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 21.08.2019
     
Bunte Rollbalken

Microsofts Internet Explorer 5.5 hat uns neben viel Freunde am Surfen auch erstmals farbige Rollbalken geschenkt. Ein Effekt, den viele Web-Designer schon immer haben wollten.

Beispiel

Es gibt mehr als ein halbes Dutzend Befehle. Aber keine Sorge, ein wenig Microsoft-eigenes CSS und die Sache läuft. Alle Teile des Rollbalkens lassen sich einfärben, der Balken, dessen Hintergrund, die Richtungspfeile sowie die 3D- und Schatten-Effekte.

Dazu wird das entsprechende CSS-Kommando kurzerhand in den Body-Tag eingefügt. Andere Möglichkeiten wie etwa das Auslagern der Anweisungen funktionieren selbstverständlich ebenso.

3D Umrahmung

Mit diesem Befehl lässt sich der 3D-Effekt an den Pfeilen farblich hervorheben.
<body style="scrollbar-3dlight-color:red ">

Gefärbte Pfeile

hier werden die Richtungspfeile eingefärbt:
<body style="scrollbar-arrow-color:red ">

Neue Grundfarbe

weisen dem Rollbalken die Grundfarbe Grün zu:
<body style="scrollbar-base-color:green ">
oder <body style="scrollbar-face-color:green">

Veränderter Schatten-Effekt

erzeugen einen Schatten-Effekt:
<body style="scrollbar-darkshadow-color:blue "> oder <body style="scrollbar-shadow-color:blue">

Bunter Hintergrund

Den Hintergrund kann man mit den Befehlen
< body style="scrollbar-highlight-color:red ">
oder <body style="scrollbar-track-color:red"> gestaltet werden.

 

Im Zusammenspiel der verschiedenen Befehle zeigt der Internet Explorer, dass sich Rollbalken sowohl schön als auch nutzbringend verändern lassen. Im letzten Beispiel wird der Rollbalken gemäß dem Seitenhintergrund gefärbt. Der Übersichtlichkeit halber haben wir die CSS-Anweisungen für die Platzierung im Dateikopf aufbereitet.

Und hier ein Quellcodemuster

<style type="text/css">
<!--
BODY {scrollbar-face-color: rgb(255,96,0);
scrollbar-highlight-color: white;
scrollbar-shadow-color: white;
scrollbar-3dlight-color: rgb(255,96,0);
scrollbar-arrow-color: rgb(255,255,255);
scrollbar-track-color: white;
scrollbar-darkshadow-color: rgb(255,96,0);}
//-->
</style>

<style type="text/css">
< !--
BODY
{scrollbar-face-color: #000000; /*Balkenfläche*/
scrollbar-highlight-color:#eeeeee; /*Rahmen oben und links*/
scrollbar-shadow-color: #eeeeee; /* Rahmen unten und rechts*/
scrollbar-3dlight-color: #000000; /*3D-Farbe der Scrollbar*/
scrollbar-arrow-color: #ffffff; /* Pfeilfarbe*/
scrollbar-track-color: #000000; /*Balkenhintergrund*/
scrollbar-darkshadow-color: #000000;} /*dunkler Schatten*/
//-->
< /style>

Farbige Rollbalken können auch innerhalb von mehrzeiligen Textfeldern, Frames oder Inline-Frames verwendet werden. Von Microsoft existiert ein Online-Tool mit dem sich prima spielen lässt.

(kp/sl)