Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials How Do They Do That? Scrollbar Colors

How Do They Do That? Scrollbar Colors


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.
image 1

image 2 image 3 image 2

About the Author:
How Do They Do That? Scrollbar Colors 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: J. Scott Harris
Learn HTML step-by-step from A to Z or improve your professional skills. More Tutorials: Featured Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com


Like us to: