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:
|
    |
