Scroll Bar?, A transparent scroll bar? |
Scroll Bar?, A transparent scroll bar? |
![]()
Post
#1
|
|
![]() Im Gavin HI!! ![]() ![]() ![]() ![]() ![]() Group: Member Posts: 802 Joined: Mar 2005 Member No: 111,644 ![]() |
anyone got any clue how to make a scroll bar thats invisible on the computer but it will scroll and i should be able to adjust its height and width? im sure if i spent time with div i could easily figure out how to input a scroll bar but i dont have time cause im leaving soon so help plz lol im sure u all know 0_o tell me ur secret
|
|
|
![]() |
![]()
Post
#2
|
|
![]() Senior Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Official Designer Posts: 4,591 Joined: Dec 2004 Member No: 77,305 ![]() |
I got this from Celestial Star. Not sure if it'll work though.
QUOTE 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: 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> |
|
|
![]() ![]() |