scriptygoddessEvery now and then, I run across bits of code that I simply cannot make stick in my head, no matter how hard I try to make it happen. For me, one of my worst problems was remembering which CSS property controlled each portion of the scrollbar.
I loved having pretty, properly-shaded scroll bars, but every time I sat down to do a design, I couldn't remember which property was which.
So, I made a little cheat sheet.
Here's the little text bit I have saved on my desktop that helps me remember what colors to put in each property.
(Stating the obvious: this goes in your stylesheet.)
BODY {
scrollbar-base-color: MEDIUM;
scrollbar-face-color: MEDIUM;
scrollbar-track-color: BACKGROUND;
scrollbar-highlight-color: LIGHT;
scrollbar-3dlight-color: MEDIUM;
scrollbar-shadow-color: DARK;
scrollbar-darkshadow-color: MEDIUM;
scrollbar-arrow-color: DARK;
}
The illusion of three dimensions is created by three colors — a light, a medium, and a dark — arranged together in a specific way. 'Background' is meant to be whatever the page's current background color is.
…and suddenly I found myself spending a lot less time on scrollbars. I'm all about that sort of thing. Lazy is good!
