Tutorials > CSS > Scrollbars
Learn how to make customized scrollbars that add flavor to your page.
Ever wonder how to create those cool colored scrollbars? They are very easy. I'll show you the code first and explain it all.
This will go in the head section of you page.(between <head> and </head>)
Code:
------------------------------------------------------------------------
<style type="text/css">
{
scrollbar-face-color : #C0C0C0 ;
scrollbar-track-color: #C0C0C0 ;
scrollbar-arrow-color: #000000 ;
scrollbar-shadow-color: #000000 ;
scrollbar-highlight-color: #C0C0C0 ;
scrollbar-darkshadow-color: #C0C0C0 ;
}
</style>
------------------------------------------------------------------------
Face color is the actual scroll you use to scroll the page. The track color is the track the scrollbar moves on. Arrow color is for the small arrows at the top and bottom of your scrollbar. Shadow color is the scrollbar shadow. Highlight is the color you see sometimes when you click on the track of the scrollbar. Dark shadow is the shadow around the top and bottom arrows.
Don't forget to change the hex code colors with the ones you'd like to use. Please refer to the Hex Chart if necessary.
Affiliates
Resources
