What's a good way to add some style to your page or blog? A scrollbar! Scrollbars are probably the easiest part of style and are easy to understand. Depending on the colors you add to it, you could end up with a large variety of different scrollbars.
Hopefully by the end of this tutorial you will be ready to make your own scrollbars!
First, let's break down the scrollbar. It is broken into 7 major parts. These are:
Arrow: The small triangle that is on each end.
Face: The main part of the scrollbar that moves down and up. Most important color.
Highlight: The small line that is next to the face on the left side.
3dlight: The outermost line on the left side and top.
Darkshadow: The out-most line on the right side and bottom.
Shadow: The small line next to the face on the right side.
Track: The part that the face moves over.
Now keep that in mind as we move through this. Here is your scrollbar code that is shown in the expanded image above:
<style type="text/css">
body{ scrollbar-face-color:fuchsia;
scrollbar-highlight-color:white;
scrollbar-3dlight-color:orange;
scrollbar-darkshadow-color:darkblue;
scrollbar-shadow-color:gray;
scrollbar-arrow-color:yellow;
scrollbar-track-color:aqua; }
</style>
The scrollbar code is fit between two style tags. This can be placed in your style.css or your style area within your header.I am using just words here, but for more variety, use six-digit hex codes (ex: #000000).
So just play around with colors to get the look you are going for.
Note that scrollbars work in IE, not firefox or apple programs. I do recommend having one in your layout anyways, since the majority of your visitors will be using IE and standard scrollbars are just not all that pretty.