Scrollbars
Adding effects to your scrollbars is an easy way to add flavor
to your page.
The first thing you need to know is where to put the script.
The script goes in the head section of your page (between the
<head> and </head>). Basically, it uses the style
tag. The script looks like this:
<style>
<!--
BODY{
scrollbar-face-color: #000000;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #707070;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #d9d9d9;
scrollbar-3dlight-color: #009900;
scrollbar-darkshadow-Color: #993300;
}
-->
</style>
The most important attributes are first three. The first one
changes the color of the bulky mass in the scrollbar that moves
while you scroll. The second changes the color of the track
behind that bulk. The third one changes the little arrow color
at the bottom and top of the scrollbar. The rest control subtle
changes that may be left out if you wish. If you want to create
a simple, flat-looking scrollbar, then using the first three
is all you will need. The code would look like so:
<style>
<!--
BODY{
scrollbar-face-color: #000000;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #707070;
}
-->
</style>
Here is an example of the scrollbars in each instance (the first
one having all six attributes, and the second one having only
three).
|