Smiley Helper version 48: Back to School in the Fall

Transparent Scrollbars

Always wanted to have transparent or partly transparent scrollbars? Doesn't it make your page that extra bit cool or maybe even.. pro-looking? Here's the code, and best of all, it can work for frames, and normal blogs. :)

THIS IS WHERE YOU PUT YOUR TEXT THIS IS WHERE YOU PUT YOUR TEXT THIS IS WHERE YOU PUT YOUR TEXT THIS IS WHERE YOU PUT YOUR TEXT

<div class="scroll" style="width:100; height:100; overflow: auto;"> THIS IS WHERE YOU PUT YOUR TEXT THIS IS WHERE YOU PUT YOUR TEXT THIS IS WHERE YOU PUT YOUR TEXT THIS IS WHERE YOU PUT YOUR TEXT </div> <style type="text/css">.scroll { scrollbar-3dlight-color: white; scrollbar-arrow-color: white; scrollbar-base-color: white; scrollbar-darkshadow-color: white; scrollbar-face-color: B1AC6E; scrollbar-highlight-color: B1AC6E; scrollbar-shadow-color: B1AC6E; scrollbar-track-color: B1AC6E; FILTER: chroma (color=B1AC6E); } </style>

Feel free to change the height, width, and colors in the scrollbar except B1AC6E. :)

Lesson

To make it transparent, you're selecting one color to be taken out (which essentially makes it transparent). In this case, the color is B1AC6E. The code bit FILTER: chroma (color=B1AC6E); says that that color is going to be taken out.

If you changed the chroma color to 00000 (black) and you had a page with black text and a white background, the text would look like it turned white but really is transparent.

*(put on top of a background so you can see that it's transparent)

Copyright Smiley Helper 2004-2008
About - Awards / Gifts - Contact - Link Back - Links Out - Our Host - Terms - Valid CSS