Forum: web design and graphics community

Celestial Star Forum > Web Development > Coding > Transparent scrollbar

Pages: [1]

« previous next »

Author

Topic: Transparent scrollbar (Read 4450 times)

Melfina

Administrator
Valkyrie Randgris

Posts: 1289

Transparent scrollbar

« on: August 13, 2004, 01:48:55 PM »

This should be pretty simple: we apply a color that is NOT contained anywhere in our layout (let's say for example, very bright green or magenta color) to the tags of the scrollbar we want to make transparent, and then we make that color transparent.

This effect only applies on certain browsers, like Internet Explorer 5.5 and superior. Scrollbars can't be even coloured in Netscape, 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:

Code:

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:

Code:

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:

Code:

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


	Logged

MySpace ~ MySpace Codex ~ Rune Nifelheim

spinter

Retribution

Posts: 183

Transparent scrollbar

« Reply #1 on: April 17, 2006, 07:00:56 AM »

I'm sorry to ask, but are there any way to make Transparent-Scrollbar or changin the scrollbar Colors in other Browser...? Especially Firefox... Coz there are so many protest to IE and i've understand and turning to Firefox..


	Logged

url=http://spinter-kidz.info]

[/url]

Yuri

Angeling

Posts: 20

Transparent scrollbar

« Reply #2 on: May 07, 2006, 02:00:41 AM »

I'm sorry, but I must be somehow to stupid for this... I've tried it lots of times now and the scrollbars just remain the default color [I use Internet Explorer for this]. My CSS looks like that:

Code:

body
{
scrollbar-face-color:#000000;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #FFFFFF;
filter: chroma(#000000); height: 0px;
}

...what's wrong?


	Logged

"Sei was du willst, aber sei du selbst." - Mike
"Being courageous doesn't mean to have no fear but to face up against it."

Hael? Patsu!

Embla

Angeling

Posts: 1

Transparent scrollbar

« Reply #3 on: October 30, 2006, 02:52:41 PM »

I too made that code, but it did not work so i came here to the forum.. what is wrong?

embla

nice site :D it's my inspiration nr one. it's great! :D


	Logged

Yuri

Angeling

Posts: 20

Transparent scrollbar

« Reply #4 on: October 31, 2006, 02:38:59 AM »

As far as I found out, transparent scrollbars only work in iframes, so that might be a reason [if you don't use them already].


	Logged

"Sei was du willst, aber sei du selbst." - Mike
"Being courageous doesn't mean to have no fear but to face up against it."

Hael? Patsu!

klairelix

Angeling

Posts: 5

Transparent scrollbar

« Reply #5 on: November 24, 2006, 11:55:40 AM »

is there any possibility to be used on <div> tag?


	Logged

img]http://img158.imageshack.us/img158/5151/destroyrb3.jpg[/img]

tall0ne

Angeling

Posts: 18

Transparent scrollbar

« Reply #6 on: December 04, 2006, 08:11:02 PM »

Interesting, but i would stick with the regular scrollbars to skip the trouble


	Logged

Atemu

Angeling

Posts: 12

Re: Transparent scrollbar

« Reply #7 on: April 06, 2007, 11:26:43 AM »

Somehow, it doesn't work with my iframes layout...

CSS:

Code:

body
{background-attachment: fixed;}

body
{font-family: Verdana; font-size: 11px; color: #C7EBFF; cursor: help;

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;

}

a:link
{color: #FFFFFF; text-decoration: none; cursor: crosshair}

INDEX:

Code:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css">
<TITLE>.:: Eternal Travel ::. Moonlight Shadow v. 1</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
</HEAD>
<BODY BGCOLOR=#97C9D2 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<TABLE WIDTH=600 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=3>
<IMG SRC="Obrazki/index_01.jpg" WIDTH=600 HEIGHT=70 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="Obrazki/index_02.jpg" WIDTH=303 HEIGHT=380 ALT=""></TD>
<TD>
<iframe name="main" src="main.html" frameborder=0 framespacing=0 noresize width=284 height=283 style="filter: chroma(#FF00FF);"></iframe></TD>
<TD ROWSPAN=2>
<IMG SRC="Obrazki/index_04.jpg" WIDTH=13 HEIGHT=380 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Obrazki/index_05.jpg" WIDTH=284 HEIGHT=97 ALT=""></TD>
</TR>
</TABLE>

</BODY>
</HTML>

Can you tell me what's wrong?


	Logged

mizuiro

Angeling

Posts: 13

mizuiro

Re: Transparent scrollbar

« Reply #8 on: June 09, 2007, 01:48:32 AM »

Quote from: klairelix on November 24, 2006, 11:55:40 AM

is there any possibility to be used on <div> tag?

Yes, it works for anything with scrollbars within the page even links, but not the page itself. But then again, it works for certain browsers only.

Quote from: spinter on April 17, 2006, 07:00:56 AM

Don't be sorry, this is a place to ask anyways.

Well, this code doesn't work on Firefox. You can't even colorize them. I don't think any amount of script or Javascript can help either.. Or at least not that I know of...

Quote from: Atemu on April 06, 2007, 11:26:43 AM

Somehow, it doesn't work with my iframes layout...

CSS:
CODE HERE

INDEX:
CODE HERE

Can you tell me what's wrong?

Yes, but it's not your fault. It seems that I sniffed out the problem. The code is supposed to go like this:

Code:

filter:chroma(color=#FF00FF);

I think Melfina missed out the "color="
So your page, after changes, should go like below:

Code:

<html>
<head>
<title>.:: Eternal Travel ::. Moonlight Shadow v. 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="">
<table width="600px" border="" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="Obrazki/index_01.jpg" width="600px" height="70px" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="Obrazki/index_02.jpg" width="303px" height="380px" alt=""></td>
<td>
<iframe name="main" src="main.html" frameborder="0" framespacing="0" width="284" height="283" style="filter:chroma(color=#FF00FF);"></iframe></td>
<td rowspan="2">
<img src="Obrazki/index_04.jpg" width="13px" height="380px" alt=""></td>
</tr>
<tr>
<td>
<img src="Obrazki/index_05.jpg" width="284px" height="97px" alt=""></td>
</tr>
</table>
</body>
</html>

And this is the CSS code:

Code:

body {
background:fixed #97C9D2;
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;
}
body {
font-family:verdana;
font-size:11px;
color:#C7EBFF;
cursor:help;
}
a:link {
color:#FFFFFF;
text-decoration:none;
cursor:crosshair;
}

I made it neat this time for you. Remember to add "" to every value, and also not to use capital letters. It won't change anything but, I think it would very useful to keep that in mind, when you want to learn XHTML

If there's any mistake, do tell.


« Last Edit: June 09, 2007, 02:12:51 AM by mizuiro »	Logged

Vangs

Administrator
Valkyrie Randgris

Posts: 525

Re: Transparent scrollbar

« Reply #9 on: June 09, 2007, 05:29:34 AM »

I wouldn't recommend anyone use this technique. It works only with Internet Explorer, and for good reason, it's invalid coding! No other browser (with the exception of Konqueror, but they only let you colourize the standard scrollbar) lets you use this technique because it takes control of an element which you shouldn't have control over. Fair enough you can modify the scrollbar with javascript, but there is only so much control web designers should have. We shouldn't have control over the style of a users' browser and that includes their scrollbar.

Having coloured or invisible scrollbars removes the familiarity aspect of a users browsing experience. I've seen people make pseudo-transparent scrollbars by making everything the same colour as their background colour... WHY?! I really don't see the attraction to it, it's poor for accessibility and usability, and its an out-right tacky effect. It was created by Microsoft, among other things, to simply draw more web designers to use their browser in the hope of dominating the market. The reason Firefox doesn't support it though, is because they're a standards compliant browser, and they won't add the effect because it isn't part of the Web Standards.

I'd recommend you save yourself a few extra bytes, and just remove this from your code.


	Logged

mizuiro

Angeling

Posts: 13

mizuiro

Re: Transparent scrollbar

« Reply #10 on: June 09, 2007, 06:54:54 AM »

Quote from: Vangs on June 09, 2007, 05:29:34 AM

I agree with Vangs in the previous post. It feels as if some people just take your layout design, and then change bits of it here and there. I haven't used this code for some time now, since I knew it wouldn't work on Firefox, and the default theme of the scrollbars aren't so bad anyways.

So yeah... "save yourself a few extra bytes, and just remove this from your code." (quoted from Vangs) You can skip the trouble (as said by tall0ne) and save time as well as not getting headaches too! ^_^


	Logged

digitalwings

Solace

Posts: 132

Re: Transparent scrollbar

« Reply #11 on: July 03, 2007, 07:16:18 AM »

Quote from: Vangs on June 09, 2007, 05:29:34 AM

i agree with Vangs. I was once a colour scrollbar person. But then I thought, "Why would it matter so much. It's not like people are fousing on yur scrollbar. They came ot see the content of your site.


	Logged

Pages: [1]

« previous next »

Jump to:

Forum: web design and graphics community

General

Art boards

Web development

Off-topic