Transparent Scrollbars (CSS) tutorial
- Added: Feb 21st, 2005
- Level: Easy/Medium
- Author: Melfina
- Reads: 18528
- Description: How to make your scrollbars transparent.
Bookmark
E-mail to a friend
View printable versionThis effect only applies on certain browsers, like Internet Explorer 5.5 and superior. Scrollbars can't be even coloured in Netscape and Firefox, and they don't validate, so make sure you would view it properly before starting with this tutorial.
Let's consider you want all the scrollbar to be transparent except from the border and arrows. You write on your CSS:
Let's take a look at this bit of code:
All those are the different tags that define the scrollbar colours. I used two colors: #FF00FF (bright magenta) and #FFFFFF (white). The magenta color will be made transparent, and white will remain visible.
Now, to make the magenta color transparent we add this bit of code in the body css tag:
The chroma filter makes that certain color between the brackets transparent, but we need to define the height so that the filter works.
This is slightly different in iframes, because the height is already defined, and instead of putting the filter code in the body tag, we put it on the iframe directly, like this:
That's all! now you have your transparent scrollbar!
If you like this tutorial why not 
digg it or 
add to del.icio.us? You can also comment this tutorial or ask for help on 
its forum topic.
Tutorial © Melfina. Do not reproduce in any way without previous permission from the author.
