PDA

View Full Version : semi-transparent scrollbars?

pinstripe_pride
05-24-2003, 10:07 PM
i'm trying to do semi-transparant scrollbars. i found a thread for transparency in an i-frame, but that only made my i-frames transparent, i want my scrollbars transparent.
nahima
05-25-2003, 03:49 AM
As far as I know, that isn't possible. However, if your background is a solid color, you could change most of the scroll bar, (except the arrows) to that color, to give it look of being transparent.
Shikin
05-25-2003, 12:44 PM
i have bumped into a few websites that have transparent scrollbar but when i tried it didnt work.oh well.does anybody knows?
keithylishus
05-25-2003, 06:37 PM
There IS a way, however, it will only work in Microsoft Internet Explorer, and not other browsers, such as Mozilla and Opera.

It will require making a div layer, using CSS, and stretching it to fit the entire page, to give the illusion that it IS the page.



<html>

<head>

<title>TITLE OF PAGE</title>

</head>

<body style="margin:0; overflow:hidden;">

<div style="width:100%; height:100%; position:absolute; overflow:auto; padding:5; display:inline; background:#background-color; filter:alpha(opacity=50); scrollbar-face-color:#color; scrollbar-shadow-color:#color; scrollbar-highlight-color:#color; scrollbar-3dlight-color:#color; scrollbar-darkshadow-color:#color; scrollbar-track-color:#color; scrollbar-arrow-color:#color;">

<p>This is where the body of your page will go</p>

</div>

</body>

</html>



Change the #background-color to whatever you want the background colour of the page to be.

The 50 in the following section ( filter:alpha(opacity=50); ) will effect the transparency of the div layer. The higher the number, the less transparent it will be. It must be between 0 and 100.

Change the different #color to change the color of your scrollbar.

Just please remember that this is Internet Explorer-specific.

Another important note: This will make EVERYTHING in the page semi-transparent; not just the scrollbar.
Elentari
05-25-2003, 11:40 PM
Actually there is a way to make transparent scrollbars using CSS and a chroma filter. What you do is this...

Write your scrollbar script like you would normally and make all of the sections that you want to be transparent the same colour (I suggest you use a colour that you don't have anywhere else in your page...something like lime green will do). Then you add the chroma filter using that same colour, what this does is turn all the areas in the page that contain that colour transparent.


scrollbar-face-color: #00FF00;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #00FF00;
scrollbar-arrow-color: #00FF00;

FILTER: chroma (color=00FF00)


In that code...all of the sections that are the colour 00FF00 become transparent.
keithylishus
05-25-2003, 11:55 PM
The chroma filter does not work with the main body scrollbar, though. You would have to create a div layer and insert it into the inline CSS to make it work.
Elentari
05-25-2003, 11:58 PM
Yeah but she said she's working with an Iframe so that should serve her purposes. If she wants the body scrollbar to blend it it will just have to have the colours changed to match the background.
keithylishus
05-26-2003, 12:02 AM
But iframes are inline frames, not div layers, so the scrollbar is a main scrollbar.

If she wan't inline frames, she would have to paste my code into each page, to disable the body scrollbar, and create a new one which can be manipulated.

If she used absolute positioned div layers, the new scrollbar could be created and manipulated without having to duplicate the code.
genoa
05-29-2003, 08:11 AM
hmm that didn't seem to work >: ..can't seem to figure out why though .. wanna see?

code:

body
{font-family: Juice ITC;
color: #666666
font-weight: bolder;
border-width: 4px;
text-decoration: none

scrollbar-face-color: #00FF00;
scrollbar-shadow-color: #00FF00;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #00FF00;
scrollbar-darkshadow-color: #00FF00;
scrollbar-track-color: #00FF00;
scrollbar-arrow-color: #000000;

FILTER: chroma (color=00FF00)}




here you could go see it (http://www.host.leaena.net/deepcold/home.html)

somehow .. nothing turned transparent >: just a greyish color
Elentari
05-29-2003, 10:23 AM
Prolly because it's a main body scrollbar...though it'll work with a div instead of an iframe. Otherwise there's no other way to do it unless you just make the scrollbars the same colour as your background colour.