click to pop up player
Bookmark and Share

An Anime Graphic and Graphic Resource site, from your host, Phoenix. This site offers Wallpapers, MySpace Layouts, Avatars, MP3s, Anime Reviews, Artbook Scans, Anime Screenshot Galleries, Textures, Photoshop Brushes, Transparent PNGs, and much more.
rate your visit:
 
Read My Blog   Friend Me On MySpace   Follow Me On Twitter   Visit Me On DeviantArt   Subscribe To TFL Design  
 
shoutbox
Online
 
 
 
siteaffiliates
more
 

« return to main


HEX Colors and Application to Scrollbar

I'm not going to bother putting a HEX chart here... Too many other sites have it so why not use it? Use THIS ONE as an example of what it is. Basically to use them, you need to simply choose the color you like and place the six digits or letters coding after the # in your codes.

Example for Scrollbar Coding:

< style type="text/css" >
body{scrollbar-face-color:#4A3F72;
scrollbar-3dlight-color:#4A3F72;
scrollbar-highlight-color:#7866B1;
scrollbar-shadow-color:#261F3C;
scrollbar-darkshadow-color:#261F3C;
scrollbar-track-color:#000000;
scrollbar-arrow-color:#000000;}
< /style >

Now here's the trick to creating a 3D effect to your scrollbar. Most of the time I use 4 different colors. The FACE and 3DLIGHT share the same color, both SHADOW and DARKSHADOW share the same color- at a darker tint than the FACE and 3DLIGHT, HIGHLIGHT has its own unique color- lighter than FACE color, and the TRACK and ARROW color are the same. (usually the same color as my background- in this case black) Viewing the diagram below, you see that the face, arrow and track are easy to identify. 3DLIGHT is the outer layer on the left side, HIGHLIGHT is the inner layer on the left side, SHADOW is the inner layer on the right side and DARKSHADOW is the outer layer on the right side.

Use the example below to view the range to use when choosing colors. I would usually choose the FACE color first, but that's entirely up to you.