Transparent or hide scrollbar

To create a transparent scrollbar or hide it from view, we need to work with the css properties governing scrollbar colors that we learnt on the another page Scrollbar colors - Changing the scrollbar using HTML color codes.

Here are the cascading style sheet properties once again. Note: These properties are recognized by Internet Explorer (5.5 and above) and are ignored by FireFox, Opera and Netscape.

• scrollbar-track-color: Sets the color for scroll bar track
• scrollbar-face-color: Sets the color for the scroll bar slider
• scrollbar-arrow-color: Sets the scroll bar arrow color
• scrollbar-3dlight-color: Sets the scroll bar 3D light color
• scrollbar-highlight-color: Sets the scroll bar highlight color
• scrollbar-shadow-color: Sets the scroll bar shadow color
• scrollbar-darkshadow-color: Sets the scroll bar dark shadow color

When does a web page display a scrollbar?

A web page displays a scrollbar when the content overflows the display area on a browser. The display area on a web browser is controlled by several factors such as the screen resolution, installed toolbars, browser configuration (display of large or small icons), view/hide status bar etc. Thus, if the page is long, the browser displays a scrollbar on the right (on LTR directional languages) and if the width of the page has been set at a higher value a horizontal scrollbar will be added in the browser window.
What if the page content is less than the display area in a browser?
Browsers behave differently if the page fits in the display area. For example, Internet Explorer displays a "grayed" scrollbar while Netscape and Mozilla do not show a scrollbar. The following images will make this clear. The images are of browsers whose windows have been maximized on a screen resolution of 800x600 pixels.

Note how Internet Explorer displays a "grayed" scrollbar even if the page content fits in the browser display area.

Netscape Navigator on the other hand displays no scrollbar in the window if the web page content fits nicely in the browser display area.

Thus, even though the page content fits nicely in the browser display area, Internet Explorer will show a scrollbar. How do we make this scrollbar transparent or hide it from view?
We simply set all css properties to the value of the background color of the web page! Here is a web page with a light green background (#CEE7A3). You will notice that there is no scrollbar - not even a grayed one in Internet Explorer. We have set all scrollbar CSS properties to the light green background color (#CEE7A3). This displays all components of the scrollbar in the same color as the background and thus, hides or makes the scrollbar transparent.

html {background-color: #CEE7A3;
scrollbar-shadow-color: #CEE7A3;
scrollbar-highlight-color: #CEE7A3;
scrollbar-face-color: #CEE7A3;
scrollbar-3dlight-color: #CEE7A3;
scrollbar-darkshadow-color: #CEE7A3;
scrollbar-track-color: #CEE7A3;
scrollbar-arrow-color: #CEE7A3;}

Things to remember
If the page is short in height so that the entire page contents are shown in the browser display area, Internet Explorer will still present a scrollbar - though grayed out. To hide it or make it transparent, we use the CSS scrollbar rules and set all of them to the value of the web page background color.
Other popular browsers such as Firefox and Netscape will not show scrollbars for a short page but if the page is long, you cannot prevent these browsers from providing the vertical scrollbar.

Read More

Scrollbar colors - Changing the scrollbar using HTML color codes

Let us look at the magnified image of the scrollbar that we saw on the previous page again.

You will note that both the slider and the scroll arrow boxes display the scrollbar highlight, 3dlight, darkshadow, shadow and face colors.

Now that you know the different css properties to which you can attach html color codes, you will be able to create great looking scrollbars in no time. Let us look at a few examples:

A nice green colored scrollbar without the 3D effect - Click to view the scrollbar - opens in a new window.

html {scrollbar-face-color: #8AB200;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color:#53670D;
scrollbar-darkshadow-color: #53670D;
scrollbar-track-color: #D4E597;
scrollbar-arrow-color: #53670D;}

A pink scrollbar with soft edges - Click to view the scrollbar - opens in a new window.

html {scrollbar-face-color: #FFE3FF;
scrollbar-shadow-color: #FE81FF;
scrollbar-highlight-color: #FE81FF;
scrollbar-3dlight-color:#CE0075;
scrollbar-darkshadow-color: #CE0075;
scrollbar-track-color: #FFC0C0;
scrollbar-arrow-color: #CE0075;}

A brown colored scrollbar with 3D effect and light from a different angle - Click to view the scrollbar - opens in a new window.

html {scrollbar-face-color: #CE7E00;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #6F4709;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color: #6F4709;
scrollbar-track-color: #FFE8C1;
scrollbar-arrow-color: #6F4709;}

A thin scrollbar - Click to view the scrollbar - opens in a new window.

html {scrollbar-face-color: #367CD2;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;}

If you look at the HTML/CSS codes for the scrollbars in the examples above, you will understand that different types of scrollbars can be created using HTML color codes and color names. Scroll bars can not only be changed for the main scrollbars of a web page but the HTML color codes can also be used to change scrollbar colors for HTML textarea elements.

Can I use HTML color names instead of hexadecimal color codes?

Yes, absolutely! You can use whichever form you feel comfortable with. You can also refer Colors in HTML - web page color codes and names. Some related articles that can help you understand colors on the web: Websafe colors, Web safe colors list, Detailed list of HTML color names and List of html colour names

Now that we know how to manipulate scrollbars on web pages using HTML color codes, let us see how we can create a transparent scrollbar with this knowledge.

Read More

Coloring Scrollbars using CSS properties and rules

The scrollbar-base-color is the most basic style sheet property that one can apply to a scrollbar. This property takes a color name or color code as value and displays the scrollbar in that shade. However, if you set the value for this property to a dark color, the scroll arrows might not be visible because they are displayed in black.

As promised in the CSS Scrollbar color code article, let me tell you how you can change the color of the scroll arrows.

The color of the scroll arrows are controlled by scrollbar-arrow-color CSS property. This property can be included in a style selector like html or can be a part of a rule that you have named. Here is a style that will set the web page scrollbar to a deep orange color and the scroll bar arrow color to white.

html {scrollbar-base-color: #FF6600; scrollbar-arrow-color: #FFFFFF;}

To check the results - click here.

Now you have learnt one more style sheet property for coloring scrollbars.
Instead of going through each property individually, let me show you a nice looking blue scrollbar. The blue colored scroll bar on this web page (opens in a new window) employs several scrollbar style properties. You will notice that the scrollbar track color is a pale yellow. This would not have been possible by using only the scrollbar-base-color style property... there is something else going on here and let us delve deeper into it.

Here is an example of a rather gaudy scrollbar (open in a new browser window).
An image of the gaudy scrollbar is below and the colors used in it are red (#FF0000), blue (#0000FF), green (#00FF00), yellow (#FFFF00), pink (#FF00FF), cyan (#00FFFF) and black (#000000).

Note: The numbers prefixed with the hash (# sign) that you find in parenthesis after color names are hexadecimal codes of those colors. If you want to know more about hexadecimal color codes, refer Colors in HTML - web page color codes and names. Some related articles that can help you understand colors on the web: Websafe colors, Web safe colors list, Detailed list of HTML color names and List of html colour names

As depicted in the image above, a scrollbar can be take in color at different places:

• Scroll bar track color
• Scroll bar slider color
• Scroll bar arrow color (which we have already learnt)
• Scroll bar 3D light color
• Scroll bar highlight color
• Scroll bar shadow color
• Scroll bar dark shadow color

You can set colors for all these on a scrollbar using styles. And here are the CSS properties that govern these colors:

• scrollbar-track-color: Sets the color for scroll bar track
• scrollbar-face-color: Sets the color for the scroll bar slider and the boxes that contain the scrollbar arrows
• scrollbar-arrow-color: Sets the scroll bar arrow color
• scrollbar-3dlight-color: Sets the scroll bar 3D light color
• scrollbar-highlight-color: Sets the scroll bar highlight color
• scrollbar-shadow-color: Sets the scroll bar shadow color
• scrollbar-darkshadow-color: Sets the scroll bar dark shadow color

In the gaudy scrollbar, above, the values for these different properties have, thus, been defined in the CSS html selector as shown below:

html {scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}

Do the scrollbar CSS properties conform to the W3C style sheets rules - Checking CSS validity?

The scrollbar CSS properties are NOT W3C valid.
W3C is an organization that lays down the standards for HTML and CSS. Companies that develop web browsers should, ideally, adhere to these standards but unfortunately each company tries to better the competition by including certain HTML tags and CSS properties that are specific to its browser. The scrollbar cascading style sheet rules are a typical example of browser specific CSS properties; they work very well under Internet Explorer but fail under the present version of FireFox.
For your information, the W3C CSS validator can be found at http://jigsaw.w3.org/css-validator/.
So if you are one of those meticulous types who like to follow rules, it would be better that you do not use the css scrollbar properties. By the by, W3C HTML and CSS validation has been discussed a lot on several blogs and online forums. The two main questions being (a). Should we take the additional effort to validate all our web pages; i.e. is W3C HTML and CSS validation of any value? and (b). Do web pages with valid HTML and CSS rank higher on search engines?
If you want to dig deeper and know the answers to these questions, I suggest you read these discussion threads and blogs.

Read More

CSS Scrollbar - color scrollbar using cascading Style Sheets

Colors can be added to the otherwise "dry" web page scrollbar using CSS (Cascading Style Sheets). The colored scrollbars are visible in Internet Explorer (version 5.5+); other popular web browsers like Firefox, Opera and Netscape do not display colored scrollbars because they ignore the scrollbar CSS code. So you do need Internet Explorer 5.5 or higher to see the scrollbar colors and take full advantage of this tutorial.

Basic CSS property for a scrollbar - adding a base color

A quick way to color a scrollbar is to attach a base color to it. This is done using the scrollbar-base-color style sheet property which looks like:

{scrollbar-base-color: [color name]/[color value]}

Here is a page with an orange colored scrollbar - opens in a new window. The code used for this orange color is #FF9900 - .

You will notice that the arrows are black in color and the css scrollbar has a 3D kind of appearance.

Let us now have a look at a dark blue colored scrollbar - Click to display a web page that shows scrollbars using the css scroll-base-color property set to #003366 - .

The arrows are in black color and barely visible. We will soon see how we can work around this problem but before that let me detail how you can add the CSS code to a web page to color the scrollbar.

Adding CSS code on web pages to color scrollbars

There are two ways to attach this Cascading Style Sheets code to a web page - Embedding or Including/Importing an external .css file.

The scroll-base-color property is added to the html css selector. The style sheet rule looks like:

html {scrollbar-base-color: color name or color value}

This style is added to a web page either as an embedded style sheet or as an external style sheet (.css) file that is included on a web page using the HTML tag or @import. If you haven't used style sheets ever, no need to worry... details are below.

Embedding CSS scrollbar rule on a web page

Style sheet rules can be embedded inside each web page in the section enclosed within the tags. So to create an orange colored scrollbar for a web page you use the following code:

Your web page content

The style sheet rule is embedded in the HTML

Read More

Scrollbar Tutorial - Change colors to create a custom scrollbar

This tutorial will guide you on how to create a custom web page scrollbar by changing the colors associated with it. Web browsers display scrollbars in default colors. These standard colors depend on the configuration and settings of your desktop or any skins that you would have applied to the browser. Internet Explorer version 7 and Firefox 2 display a blue colored scrollbar in Windows XP while Netscape 7.1 has a gray colored scrollbar.

Vertical scrollbar in default colors under Internet Explorer on XP operating system

Vertical scrollbar in default colors under Firefox browser on Windows XP

Vertical scrollbar in default colors under Netscape Navigator on XP operating system

When do browsers display scrollbars for web pages?

A browser displays scrollbars when web page content exceeds the display area of the browser window. When a web page is long (vertically), the browser adds a scrollbar to the web page on the right hand side (in LTR directional languages). Also, if the width of the web page is more than the width of the display area of the browser a horizontal scrollbar is displayed.
Note: The height of the display area is decreased by installed toolbars and browser configuration such as having large icons displayed instead of small ones.

What is a web page scrollbar?

The web page scrollbar consists of a slider, two scroll arrows and the scroll track on which the slider moves. The arrows are located on the top and bottom of the scrollbar. The main function of a scrollbar is to help the user move around the web page vertically and horizontally in the display area of the browser. Clicking on the scroll arrows, clicking and dragging the slider or clicking the scroll track on which the slider moves achieves this shifting of web page content. [Web pages content can also be shifted vertically in the display area of a browser by the scroll wheel on the mouse]

Clicking once on the scroll arrows move the web page content by a few pixels.
Web page content can be moved to the desired location quickly by clicking and dragging the slider or by clicking repeatedly on the scroll track.

Horizontal and vertical scrolling

Browser can display horizontal and vertical scrollbars for web pages. In fact, if the web page content is longer and wider than the display area of the browser both horizontal and vertical scrollbars are shown.

Vertical scrolling is very common for web pages. The amount of scrolling involved depends on the web page content; the longer the page the more the scrolling required to reach the bottom. The size of the scrollbar slider provides a good indication of the length of a web page. If the slider is small, the web page is very long and vice versa. Good web site design dictates that a web page should not be more than three vertical display areas or three pages in a browser. Sometimes, for various reasons, you would have to put all content on a single page. If this is the case, be sure to include other web navigation elements, which will assist the viewer. You can read Web Site Navigation - definition and tips for a detailed explanation of good web site navigation techniques.

Horizontal scrolling for web pages is considered very bad web design. A horizontal scrollbar is displayed when the web page is wider than the width of the display area on a browser.
So if you layout web pages with tables (as most of us do), be sure to either use flexible table widths (table widths based on percentages instead of pixel values) OR keep the width of the tables not more than 779 pixels so that visitors with monitors set at a screen resolution of 800x600 pixels can view the web page without the horizontal scrollbar.

Note: The width of the display area of Internet Explorer on a screen resolution of 800x600 pixels used to be 780 pixels. However, the browser under XP operating system has changed this display area width to 779, a pixel less than its previous value; and this is enough to push the browser to display a horizontal scrollbar.

How to change colors of a web page scrollbar?

Remember, scrollbars colors can ONLY be changed for Internet Explorer. Other popular web browsers such as Firefox, Opera and Netscape (well, almost dead now) will ignore the specific CSS rules and continue to display the scrollbars in default colors. Changing the colors of a scrollbar involves adding a little style sheet (CSS) code to your web pages. To create custom scrollbars, you should know a bit of HTML. If you are a beginner, no need to fret, once you finish this tutorial, you will not only be able to create those wonderful looking scrollbars but also understand how to include them on your web pages.

Why do people color scrollbars on web pages and web sites?

Here are some reasons why developers include colored scrollbars on web pages:

• To add a little spice to the otherwise drab looking web page element
• To give a little coherence to their design so that the scrollbar doesn't stand out
• If it can be done, why not do it?

Read More