Coloring scrollbar

You can decorate scrollbar of Internet Explorer 5.5 or newer. Other browsers including Netscape, Opera, Mozilla do not support scrollbar properties. These browsers don't mind these properties; just they don't understand and don't error! If client is using MSIE 5.5 or newer, e.g., Internet Explorer 6, you can provide colorful scrollbar to him/her.

Using the style sheet definition shown above, you can correspond to Windows default scrollbar. But, MSIE actually supports eight scrollbar properties, designer can specify:

scrollbar-base-color need not be mentioned. Actually, it is same as scrollbar-3dlight-color. The later, if mentioned always overides the former. Next, you may use scrollbar-track-color or use not; scrollbar-track will show the chequered combination of scrollbar-face-color and scrollbar-highlight-color, if scrollbar-track-color is not mentioned. You may opt to mention it. You will get plain scrollbar-track of that color, then. scrollbar-arrow-color is the color for the two scrollbar-arrow. scrollbar-track-color is the color of the scrollbar-track. scrollbar-face-color is the color for scrollbar. If you can't follow what is said in few previous lines, please reread above. Or the below figure of magnified scrollbar attempts to clearly show you what is what:

Once again note that, you can color the scrollbar by metioning only six properties in CSS as shown in the figure. scrollbar-3dlight-color overides scrollbar-base-color. And scrollbar-track-color will give plain color track, which is otherwise a chequered combination of scrollbar-face-color and scrollbar-highlight-color, if scrollbar-track-color is not mentioned. Please, see the picture.

If we put same color ( e.g., LightCyan ) to both, scrollbar-3dlight-color and scrollbar-darkshadow-color. And same color ( e.g., PowderBlue ) to both, scrollbar-shadow-color and scrollbar-highlight-color. Then, scrollbar appears flat ( Why? see the picture! ). In general, note that ( obviously! ), colors of borders around scrollbar ( see the pciture, again! ) and arrow should be dark. Face color of scrollbar should be light and lastly, color of track should be intermediate, i.e., not too dark, not too light. One such example ( only 3 colors used ) is given below.

In this case, we use more colors ( 5 in example below ), contrary to what is said above, for flat scrollbar. scrollbar-base-color ( scrollbar-3dlight-color ) is very dark. scrollbar-highlight-color is light ( it's generally kept light ). And lastly, scrollbar-arrow-color is also light ( it may be dark in other typical case ) to contrast neighbor darker colors. So, total of 5 colors used. Default MSIE scrollbar ( see top of this Web page ) also has 5 colors.

Here is another example which renders the ( 3-d ) scrollbar using 5 colors. scrollbar-3dlight-color ( i.e., Orange ) is put same as scrollbar-darkshadow-color, scrollbar-highlight-color ( i.e., CornSilk ) is put same as scrollbar-shadow-color. ( See, once again the above picture; perhaps last time! )

This tutorial ends here.