With the coming of CSS, scrollbars are suddenly seen as part of the web-page, rather than part of the browser. Take the scrollbars on this very page - they blend in perfectly! And this is how I did it:
<style type="text/css"><!--
body {scrollbar-face-color:#000000;
scrollbar-shadow-color:#632984;
scrollbar-highlight-color:#632984;
scrollbar-3dlight-color:#130919;
scrollbar-darkshadow-color:#130919;
scrollbar-track-color:#130919;
scrollbar-arrow-color:#C2A2DA}
--></style>An easier, although less customizable, way is to just set the general color scheme, and let the highlight and shadow colors render automatically. Like so:<style type="text/css"><!--
body {scrollbar-base-color:#632984;
scrollbar-arrow-color:#C2A2DA}
--></style>Since it can be tricky picking out which color is what (like, what's the difference between shadow-color and darkshadow-color?!), here is a program that will do it all for you!Transparent Scrollbars
Using the chroma CSS filter, you can now get a transparency or semi-transparency effect on the scrollbars of your iframes and div layers. Here is the code you'll use:
<style type="text/css"><!--
.div {filter:chroma(color=#FFFFFF);
scrollbar-face-color:#000000;
scrollbar-shadow-color:#632984;
scrollbar-highlight-color:#632984;
scrollbar-3dlight-color:#130919;
scrollbar-darkshadow-color:#130919;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#C2A2DA}
--></style>See where it says filter:chroma(color=#FFFFFF)? That's where we set the color that will be transparent, so that any part of the scrollbar you set to #FFFFFF (which is white) will be transparent. It doesn't have to be #FFFFFF, you can change it to any color that you won't be using elsewhere in the page.Once you have the above code in between your <head> and </head> tags, put class="div" allowtransparency="true" into the div or iframe tag that you want to have transparent scrollbars. So your iframe code would look like this:
<iframe name="name" src="frame.html" class="div" allowtransparency="true"></iframe>
Reverse Scrollbars
One last scrollbar trick is to baffle the viewer by placing it on the left side of the browser window. This is also done with CSS:
<style type="text/css"><!--
body {direction:rtl}
--></style>Then place this code right after the <body> tag:<div style="direction:ltr">The div tag will keep all the text in your page correctly aligned. You should also put a </div> tag right before the </body>tag, just to keep all your HTML correct, although it isn't absolutely necessary.
Coding Tutorials 
Hosting Tutorials 
Software 
Design Tutorials 
Site Tools 
0 Comments:
Post a Comment