Web Development Network  |  Sites:    Capital Tutorials    Internet Marketing Books    Arcade Games
Depiction- Webmaster Resources
Stock Image


Contributors: SSD VPS in Europe  |  SEO Las Vegas |  EsqRank

Dental SEO Marketing  |  Best Las Vegas SEO Company  |  Currency Converter Live

Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

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

All Graphic Design Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources