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.

Advanced Typography techniques using CSS

While the descriptions and basic uses for CSS typography controls have been beaten to death, there are still many rich typographic abilities of CSS that are not well documented.

This is an example of what you can do by combining and tweaking type using css. I am not at this time going to be describing the code in much depth, but if you are interested in learning how I did it download my advanced css typography example page and look through the source code.

I hate to say “Looks best in…” however, for these examples they really do work best in the default font for your browser. So for this page at least, please resize the text to default for the full effect.

KINDEK INC

KINDEK INC

Reflections - This only works for words/letter combinations that look the same if they are flipped (ie: very few.) Using a close line height, and a thick border for the top element we can create the illusion of a depth, and a reflection point.

Web Design Rockstarz

Drop Charectors - This technique uses a low line height and a bottom border to allow some characters (such as the lowercase g) to drop below the line. This creates a nice effect, and I use it on my blog here as you may have noticed.

Funky
Webdesign!

This is a way of creating connected letters using line heights, letter spacing, and italic letters. One could potentially recreate a logo with a few letters by using this method, or maybe find a few other creative ideas to put it to use.

Fancy Headlines

The chapel De La Ross Johnson

By using close letter-spacing and the Georgia font, we get a very classic feel. Also note the relationship between the T and the H and how the negative space between the two letters creates a unique design element of itself.

Flowing Headlines

Captivating, Creative

Logan’s Litigation

Zefer Zoo

Best Building

Of cource this effect doesn’t work in IE (surprised?). It does degrade nicely though, so I wouldn’t feel bad using it on a page. Using very low letter-spacing for the first character using a span, we can get the letters to flow together. Some combinations look and work great, some don’t at all. However - if you come across a situation where the title you use works with this flowing feel it creates a very unique feel.

Hand Writing

Don’t forget to turn off the lights when you leave!

Don’t forget to turn off the lights when you leave!

Don’t forget to turn off the lights when you leave!

By using italic text, font weights, and letter spacing we can create text that feels like a quickly jotted note. Some of the more “informal” fonts work well for this, including Trebuchet and *gasp* even Comic San’s!

Typewriter

Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines…

Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines…

Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines…

The use of light weight serif fonts with close letter spacing and line height creates a very industrial feel. This technique is commonly used in magazines for pull quotes, or even a distressed letter style design. Font’s shown are Times, Georgia, and Courier

Newspaper Headlines

Webdesign Times

Webdesign Times

Using Serif fonts, all caps to produce newspaper style headlines

Misc

SATURDAY MARCH 19TH 2046

Rock5tar and a De51gner

More Typewriter Style, less cluttered.

A few misc type styles, including using span’s to make numbers look closer to letters by resizing them.

Advanced CSS menu trick

CSS really opens the doors to a lot of powerful and rich opportunities. It is funny how such minor things can create a whole new look, feel, and effect of a site. The beauty of CSS really is that it gives you power, but not too much power. It is not a tool like flash that really invites you to run away and take things too far.

We are now coming to a point where the browsers are supporting a lot of new features, giving us more opportunities to take advantage of previously unused pseudo elements. This example, “advanced css menu tricks” will work perfectly in any modern browser, yet still be fully functional in your older version of IE as well.

The goal of the demo - example

What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall. Want to see it in action? Look at my demo page before we start.

The first step - CSS roll overs

The first step of the game is building some CSS roll overs. We want to keep things accessible so I have opted to use an IR technique. Essentially we create an image that has both the static, active and rolled over state all lined up next to each other. We then set the image as the background of th element, but the width is only wide enough for one state of the image (so if the button image is 600px wide with all three states, we make the navigation element as a 200px wide button). We then set the text indent really high and overflow to hidden so that it pushes the text out of the box. Then we only see the image even though there is still HTML text on the page for search engines and accessibility.

Image Examples

Menu Before

Button Sliced, fixed and hover states

The CSS

#main_nav { list-style: none; margin: 0; padding: 0; }
#main_nav li { float: left; }
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }

#home { background: url(../images/navigation/home.gif); width: 103px; }

#home.active { background: url../images/navigation/home.gif) -103px 0; }

The HTML

   
Home Page
   
About Us
   
Web Design
   
Graphic Designs
   
Search Engine Optimization SEO
   
Contact Us

Then when we want to change the state of the button we simply adjust the background position to be -200px (or the size of the button itself) pulling the different state of the button into view. The reason for doing it this way then simply swapping images, is the latter method tends to create flickering in some browsers.

At this point most people have it set so that if an item is hovered on (#home for example) it switches the background-image position. This creates the standard run of the mill css roll over. However we want to do something else, something more unique. We want to have every roll over item on the menu change except the one you are hovering on. This requires a little css trickery!

IE7, Safari, Firefox, all support the :hover pseudo selectors so let’s take advantage of that. What we need to do is have all the menu items change the background-image position when the menu item itself has been rolled over. Then the item that is hovered on is set to have the background-position: 0px to keep it from moving when the rest do.

The CSS

 #main_nav:hover li a#webdesign { background-position: -280px; }
 #main_nav:hover li a#home { background-position: -206px; }
 #main_nav:hover li a#graphicdesign { background-position: -340px; }
 #main_nav:hover li a#contact { background-position: -232px; }
 #main_nav:hover li a#about { background-position: -242px; }
 #main_nav:hover li a#seo { background-position: -540px; 

This pulls each menu item’s background position back when any of #main_nav has been hovered on. Now all we have to do is set the hovered items to have a background-position of 0

 #home { background: url(../images/navigation/home.gif); width: 103px; }
 #home:hover { background: url(../images/navigation/home.gif) 0 0 !important; }

The HTML is all set, already coded! Now you are ready to rock and roll except for that pesky IE5.5+. Luckily there has been a behavior file developed called cssHover.htc that will fix this issue. Simply download it, and copy and paste the following code into an IE5+ specific style sheet.

body  {
 behavior: url("/css/csshover.htc");
}

The Whole Shabang
CSS

#main_nav { list-style: none; margin: 0; padding: 0; }
#main_nav li { float: left; }
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }

#home { background: url(../images/navigation/home.gif); width: 103px; }
#home:hover { background: url(../images/navigation/home.gif) 0 0 !important; }
#home.active { background: url../images/navigation/home.gif) -103px 0; }

#main_nav:hover li a#home { background-position: -206px; }

HTML 

   
Home Page
   
About Us
   
Web Design
   
Graphic Designs
   
Search Engine Optimization SEO
   
Contact Us
  
 

Live Example