apparition.Designs | version 2 | anything you can imagine is real

.Welcome to apparition.Designs [apparitiondesigns.com]

Hello, we are currently under development and are trying to get all our content up as soon as possible. We hope to get the site up, tweaked, and bug-free A.S.A.P. If you have any questions or comments on what you have (or havent) seen so far, feel free to email me at StratzSfear@apparitionDesigns.com
 
 

.Custom scroll bars using [CSS]

Let's see, you have spent hours, days, WEEKS, creating a great looking site. But no matter what, it just doesn't seem quite right to you. The scroll bar just doesn't fit at all! If only you could change it to fit the design of your site... wouldn't that be great? Of course it would be; and guess what? It is possible in just a few lines of code!

Hopefully you are already know the benefits and are using external [style sheets] If you are, place the following code in the 'BODY' section:

 body {
     scrollbar-base-color: #663366;
     scrollbar-face-color: #232930;
     scrollbar-track-color: #546677;
     scrollbar-arrow-color: #546677;
     scrollbar-highlight-color: #2B333B;
     scrollbar-3dlight-color: #2B333B;
     scrollbar-shadow-color: #2B333B;
     scrollbar-darkshadow-color: #2B333B;
 }

If you are not using external [style sheets] you can still achieve the same effect by placing the following inside the <head> tags at the top of each document:

 <head>
 <style>
 body {
     scrollbar-base-color: #663366;
     scrollbar-face-color: #232930;
     scrollbar-track-color: #546677;
     scrollbar-arrow-color: #546677;
     scrollbar-highlight-color: #2B333B;
     scrollbar-3dlight-color: #2B333B;
     scrollbar-shadow-color: #2B333B;
     scrollbar-darkshadow-color: #2B333B;
 }
 </style>
 </head>

If you already have something in the 'BODY' part of your [style sheet] you can just add the 'scrollbar-' stuff in between what you already have there.

If you would like to know what does what:

You can change the colours using either [hex] values, or css colour names (blue, red... etc).

Notes: It has been suggested that you should keep your scroll bar colours looking '3D' so that it is easily recognizable for your users. I am obviously not 100% in agreement with this, although I do think that you should not 'integrate' it so well that you almost hide it. Make sure that more than just the arrows show up, and try and differ the track colour from the face colour. Another smart idea that I have read is you should look at it in grayscale mode in photoshop so see how it looks if you were colour blind.

I do not know of a way with css to make the track colour transparent... but I'm sure that the question will be asked and answered in the forums :D

Tutorial By: Stratz Sfear of apparition.Designs
Contact the Author: [E-Mail]
Questions? Comments? Ask at the forums! [Click Here!]