-
November 30th, 2003, 07:02 PM
#1
Junior Member
* 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:
Values:
color-rgb, color-hex, color-name
Examples:
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.
Property:
scrollbar-face-color
Description:
This modifies the actual scrollbar’s face and the predominant color of the “up” and “down” arrow buttons of the scrollbar.
Example:
scrollbar-face-color: #000000
Property:
scrollbar-arrow-color
Description:
This will modify the color of the arrows that appear in the “up” and “down” buttons of the scrollbar.
Example:
scrollbar-arrow-color: #EEE8AA
Property:
scrollbar-shadow-color
Description:
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.
Example:
scrollbar-shadow-color: #EEE8AA
Property:
scrollbar-darkshadow-color
Description:
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.
Example:
scrollbar-darkshadow-color: #696969
Property:
scrollbar-highlight-color
Description:
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.
Example:
scrollbar-highlight-color: #EEE8AA
Property:
scrollbar-3dlight-color
Description:
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.”
Example:
scrollbar-3dlight-color: #FFFFFF
Property:
scrollbar-track-color
Description:
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.
Example:
scrollbar-track-color: #000000
And now for a completed examples. Note that they should be placed in the “Body” selector. These are taken from DigitalZen.org:
Code:
Body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #EEE8AA;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #EEE8AA;
scrollbar-darkshadow-color: #EEE8AA;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #EEE8AA;
}
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.
-Zen
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.\"
-
December 19th, 2003, 06:01 PM
#2
Junior Member
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
|