November 30th, 2003 06:02 PM
* CSS Scrollbars *
This can be found at http://www.digitalzen.org/tutorials/css-scrollbars.html as of 11-30-03
This tutorial will cover the modification of scrollbars using Cascading Style Sheets (CSS). If you do not have any previous experience with CSS, you should read Tutorial: Basic CSS before continuing with this one.
Scrollbars are fairly simple as they can only be modified with colors. Images and transparencies do not work well in scrollbars. Thus we are limited to the three formats for color input:
color-rgb, color-hex, color-name
color-rgb for black is “0,0,0”
color-hex for black is “#000000”
color-name for black is “black”
For this tutorial we will focus on color-hex values. You can experiment with the others on your own time.
Now let’s discuss the properties that are applicable to a scrollbar.
This modifies the actual scrollbar’s face and the predominant color of the “up” and “down” arrow buttons of the scrollbar.
This will modify the color of the arrows that appear in the “up” and “down” buttons of the scrollbar.
This will modify the bottom and right-hand edges of the scrollbar items. Anything that has a border will have this effect applied as specified.
This also modifies the bottom and right-hand edges of the scrollbar items. If used properly and in conjunction with the scrollbar-3dlight-color it can add a layer of depth to the scrollbar objects.
This will modify the top and left-hand edges of the scrollbar items. Anything that has a border will also have this effect applied to it.
This also modifies that top and left-hand edges of the scrollbar items. If used properly it will add a layer of depth to the items, making them appear a bit more “3D.”
And now for a completed examples. Note that they should be placed in the “Body” selector. These are taken from DigitalZen.org:
This will modify the track that the scrollbar slides on. If the track color matches the background color of your site, the scrollbar will appear to be glued to the edge of the screen with nothing else holding it in place.
There are other formats that will work, this just happens to be my preferred format. Remember that there is more than one way to skin a cat, so to speak. That’s all there is to CSS Scrollbar modification, and I hope you found this tutorial useful.
This Tutorial ©2003 FallenZen. If you wish to use this tutorial on your site, please leave this credit intact.
Check out The DigitalZen (http://www.digitalzen.org).
\"We change by the speed of the choices that we make.\"