HTML and CSS  Home HTML and CSS Tutorials How Do They Do That? Scrollbar Colors
rss

How Do They Do That? Scrollbar Colors

Author: J. Scott Harris More by this author


Using Cascading Style Sheets (CSS) you can easily change the coloring of your browser scroll bars. Why would you want to do this? Well it further customizes your site and gives the visitor a sense of uniformity within the site. But all in all, it is a preference, some designers like it, some don' t. I'm not here to judge. But it can be a cool touch if it's tastefully done. What you wouldn't want to do is have one color palette for your site and another for your scrollbars that clashes.

Ok, how is it done? Simple, somewhere in your style declarations include the following:

BODY {
scrollbar-face-color: #003399;
scrollbar-highlight-color: #003389;
scrollbar-3dlight-color: #003360;
scrollbar-darkshadow-color: #053899;
scrollbar-shadow-color: #004399;
scrollbar-arrow-color: #008399;
scrollbar-track-color: #000000; }

A big thing to keep in mind here is contrast. Refraining from the appropriate degree of contrast in selecting your colors will leave you with a flattened scroll bar with no depth the visually display what a scroll bar is meant for; displaying your exact position on the overall page.


About the Author:
Click to Visit Author's Website Scott Harris is the lead graphic designer at iEntry. He oversees and participates in most of the site and newsletter design at iEntry. His articles/tutorials can be found at Designnewz.com.


Author's URL: www.webpronews.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "How Do They Do That? Scrollbar Colors"