|
CSS Scrollbars
Programs used: Notepad, Internet Explorer 5.5+
One thing which html designers certainly hunger for is complete
control of the appearance of web browsers. With the introduction
of cascading style sheets to Internet Explorer v4.0 and Netscape
Navigator v4.0, html coders were able to define and set a text size
and color for any text. Internet Explorer 5.5 brought something
different into the browsing experience, where Microsoft gave designers
the choice of changing the colors of the browser's scrollbars to
suit the colors of the site using CSS styles.
This tutorial will show you the code needed to create your own
uniquely colored scrollbars.
1. Create a new HTML document and open it with Notepad or any other
HTML editor. Write in the lines of code shown below to create a
simple line of text and plenty of line breaks inside a table:
<html>
<head>
<title>Colored Scrollbars</title>
<body>
<table>
<tr>
<td align="center">Check out the colored scrollbars<br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br></td>
</tr>
</table>
</body>
</html>
2. Now you'll need to add a few lines of code to define the hex
values of the components of the scrollbar. Edit your HTML document
to include these lines of code:
<html>
<head>
<title>Colored Scrollbars</title>
<body>
<STYLE type=text/css>
BODY { scrollbar-face-color: grey; scrollbar-shadow-color: #999999;
scrollbar-highlight-color: #CCCCCC; scrollbar-3dlight-color: #333333;
scrollbar-darkshadow-color: #000000; scrollbar-track-color: #666666;
scrollbar-arrow-color: white }
</STYLE>
<table>
<tr>
<td align="center">Check out the colored scrollbars<br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br></td>
</tr>
</table>
</body>
</html>
Now if you look at your document in Internet Explorer 5.5+ you'll
see your scrollbar should look like the image below:
It's quite a nice change from the normal scrollbar, and it's so
simple to do. Change the hex values (or colors) of each attribute
to create a huge variety of colored scrollbars:
   
BlueDesignStudios
|
