Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Transparent Scrollbars, Coding Transparent Scrollbars
melancholy
post Jun 16 2005, 12:06 AM
Post #1


Newbie [Level 1]
*

Group: Members
Posts: 15
Joined: 15-June 05
From: Canada
Member No.: 8,270



Why woud someone want a Transparent scrollbars you ask? Well fist of they do not cover too much of the image like the normal scrollbars.

You can use transparent scrollbars for different kinds of web layouts such as popups, iframes, or scrolling div layers. For iframes, make sure you've inserted a background image for the table cell containing the iframe. You do not need to do that for scrolling div layers. Although, you cannot make the main scrollbar transparent unless you make it appear that way by selecting the same color for everything.

After you code the scrollbar colors, insert this code in the iframe or div layer tags. Replace transparent color with the color that will be transparent:

allowtransparency="true" style="filter: chroma(color=#transparent color)"

Allowtransparency="true" allows the background of your iframe page to be transparent. If you already defined a background image for your iframe page, you only need style="filter: chroma(color=#transparent color)".

It should look something like this:

Iframes: <iframe name="main" src="frame source" width=### height=### framespacing="0" frameborder="0" allowtransparency="true" style="filter: chroma(color=#transparent color)"></iframe>

Div Layers: <div id="iframe" style="position: absolute; top: ###px; left: ###px; width: ###px; height: ###px; overflow: auto; filter: chroma(color=#transparent color)" allowtransparency="true"></div>

Here is an example. See the scrollbar in the iframe? It is transparent!

Do some experimenting for different effects with transparent scrollbars!

Go to the top of the page
 
+Quote Post
Saint_Michael
post Jun 16 2005, 05:23 PM
Post #2


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,566
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew



wheres the example a link maybe would help out
Go to the top of the page
 
+Quote Post
NeXDesigns
post Jun 18 2005, 08:34 AM
Post #3


Super Member
*********

Group: Members
Posts: 260
Joined: 12-August 04
From: Hurricane Alley, Florida
Member No.: 770



seems like a useful tutorial but i want to see an example for it before i even go to try this. also what browsers does it work on? ie, firefox, netscape, etc.
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Make A Transparent Picture(4)
  2. Nice Clean Php Layout Coding.(7)


 



- Lo-Fi Version Time is now: 13th October 2008 - 10:59 PM