Sexy Scrollbars??

What am I talking about? You’ve probably seen a web site, where someone has their scrollbars using the same color scheme as their design - looks good doesn’t it! Well here’s how to do it.

Set up the style sheet

OK, I presume you have read, or at least skimmed my basic styles web design tutorial, so I’m not going to explain how it works again. Right then, open your html file, and put after the tag. Now, open up your style sheet, (yourfile.css) and insert the following code…

The code

body {
scrollbar-face-color: #DEECEF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #DEECEF;
scrollbar-3dlight-color: #DEECEF;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #DEECEF;
scrollbar-arrow-color: #000000;
}

Explanation

Whoa! quite a mouthful i know, but most of the elements are pretty self-explanatory, scrollbar-face-color for example, sets the color of the scrollbar face on your web site (the main section of the scrollbar) and scrollbar-track-color sets the color of the track of the scrollbar - the area of the screen it runs on - experiment with the color values and all will become clear!

Result

Now then if you followed my instructions correctly, you should have a scrollbar like this - to change the background color, see my basic styles web design tutorial - hopefully you see the usefulness of this technique, one word of warning though - you can really spoil a page if you use this incorrectly!