For each of these properties, replace color with the color name or hex code that you want to use. To the right is an exaggerated diagram of scroll bar color anatomy. The face property fills the arrow buttons and scroll tab. The highlight and shadow properties color their inner edges, while 3dlight and darkshadow color their outer edges. Use arrow to color the arrow buttons' triangles and track for the rest of the scroll bar. If track isn't specified,
highlight also colors the mesh pattern in the track area;
otherwise the track is monotone. Finally, base fills in
track, face, and 3dlight all at once; setting any of them overrides it.
BUT this sidebar is different
"OK," you're saying to yourself, "is that all there is to a scroll
bar?" That's up to you. You can add script to these styles if subtlety is not your thing; IE 5.5 users will notice the Java Script
that we used to make this page's scroll bar change colors. The oddly named TriState Rainbow ScrollBar Script by etLux is another example. Or you can take
the quiet approach, such as making the track color blend with the page
background for a more seamless look or matching everything out to be
invisible--save for the arrows.
But before you put on your "CSS Died for My Sins" T-shirt, be aware
that so far only Internet Explorer 5.5 supports these CSS properties,
which are unashamedly proprietary.
References
Holly Cunningham, a frequent contributor to CNET Builder.com, is a
freelance Web designer who works primarily to keep her Chihuahua in
furs.
Added to make the page long.
CSS1 assumes a simple box-oriented formatting model where
each formatted element results in one or more rectangular boxes.
(Elements that have a 'display' value
of 'none' are not formatted and will therefore not result in a box.)
All boxes have a core content area with optional surrounding padding,
border and margin areas.
|
_______________________________________
| |
| margin (transparent) |
| _________________________________ |
| | | |
| | border | |
| | ___________________________ | |
| | | | | |
| | | padding | | |
| | | _____________________ | | |
| | | | | | | |
| | | | content | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| element width |
| box width |
|
------------- <-- top
top margin
-------------
top border
-------------
top padding
+-----------+ <-- inner top
| | | | | | | |
|--left--|--left--|--left--|- content -|--right--|--right--|--right--|
| margin | border | padding| | padding | border | margin |
| | | | | | | |
+-----------+ <-- inner bottom
A B C D
bottom padding
-------------
bottom border
-------------
bottom margin
------------- <-- bottom
A - right inner edge B - left inner edge
C - right inner edge D - right outer edge
| 