• Link us
  • Links
  • TOS
  • Site
  • Gallery
  • Forum
Subscribe

Transparent Scrollbars - CSS tutorial

Tutorials > CSS tutorials > Transparent Scrollbars
  • Added: Feb 21st, 2005
  • Level: Easy/Medium
  • Author: Melfina
  • Reads: 54,288
  • Description: How to make your scrollbars transparent.
Bookmark Digg del.icio.us

E-mail to a friend

View printable version


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

body { scrollbar-track-color: #FF00FF; scrollbar-face-color: #FF00FF; scrollbar-highlight-color: #FF00FF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FF00FF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color:#FFFFFF; }

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:

filter: chroma(#FF00FF); height: 0px;

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:

<iframe src="frame.htm" height="400" width="400" name="frame" style="filter: chroma(#FF00FF);"></iframe>

That's all! now you have your transparent scrollbar!


If you like this tutorial why not digg it or add to del.icio.us?

Tutorial © Melfina. Do not reproduce in any way without previous permission from the author.

  • Members login
  • Register for free

Web layouts

  • Web layouts
  • Aardvark Topsites skins
  • SMF Themes
  • Wordpress Themes

Graphic resources

  • 100x100 Avatars
  • PS and PSP brushes
  • Brush shop
  • Background patterns
  • Web icons and smilies
  • Textures
  • Renders (PNG)

Tutorials

  • Newest tutorials
  • Adobe Photoshop
  • CSS
  • Designs / Layouts
  • HTML & XHTML
  • Miscellaneous
  • Paint Shop Pro
  • PHP & MySQL

Affiliates

  • Ego Box
  • The Jaded Network

Partners

Celestial Star © Melfina 2003-2010. By using this site you agree to our terms of service
Layout credits: Hybrid Genesis, Bittbox, swe3ty
Valid XHTML | Valid CSS | Top of the page