Results 1 to 2 of 2

Thread: * CSS Scrollbars *

  1. #1
    Junior Member
    Join Date
    Nov 2003
    Posts
    22

    * CSS Scrollbars *

    This can be found at http://www.digitalzen.org/tutorials/css-scrollbars.html as of 11-30-03

    • Tutorial: CSS Scrollbars


    This tutorial will cover the modification of scrollbars using Cascading Style Sheets (CSS). If you do not have any previous experience with CSS, you should read Tutorial: Basic CSS before continuing with this one.

    Scrollbars are fairly simple as they can only be modified with colors. Images and transparencies do not work well in scrollbars. Thus we are limited to the three formats for color input:

    Values:
    color-rgb, color-hex, color-name

    Examples:
    color-rgb for black is “0,0,0”
    color-hex for black is “#000000”
    color-name for black is “black”

    For this tutorial we will focus on color-hex values. You can experiment with the others on your own time.

    Now let’s discuss the properties that are applicable to a scrollbar.

    Property:
    scrollbar-face-color

    Description:
    This modifies the actual scrollbar’s face and the predominant color of the “up” and “down” arrow buttons of the scrollbar.

    Example:
    scrollbar-face-color: #000000
    Property:
    scrollbar-arrow-color

    Description:
    This will modify the color of the arrows that appear in the “up” and “down” buttons of the scrollbar.

    Example:
    scrollbar-arrow-color: #EEE8AA
    Property:
    scrollbar-shadow-color

    Description:
    This will modify the bottom and right-hand edges of the scrollbar items. Anything that has a border will have this effect applied as specified.

    Example:
    scrollbar-shadow-color: #EEE8AA
    Property:
    scrollbar-darkshadow-color

    Description:
    This also modifies the bottom and right-hand edges of the scrollbar items. If used properly and in conjunction with the scrollbar-3dlight-color it can add a layer of depth to the scrollbar objects.

    Example:
    scrollbar-darkshadow-color: #696969
    Property:
    scrollbar-highlight-color

    Description:
    This will modify the top and left-hand edges of the scrollbar items. Anything that has a border will also have this effect applied to it.

    Example:
    scrollbar-highlight-color: #EEE8AA
    Property:
    scrollbar-3dlight-color

    Description:
    This also modifies that top and left-hand edges of the scrollbar items. If used properly it will add a layer of depth to the items, making them appear a bit more “3D.”

    Example:
    scrollbar-3dlight-color: #FFFFFF
    Property:
    scrollbar-track-color

    Description:
    This will modify the track that the scrollbar slides on. If the track color matches the background color of your site, the scrollbar will appear to be glued to the edge of the screen with nothing else holding it in place.

    Example:
    scrollbar-track-color: #000000
    And now for a completed examples. Note that they should be placed in the “Body” selector. These are taken from DigitalZen.org:

    Code:
    Body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #EEE8AA;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #EEE8AA;
    scrollbar-darkshadow-color: #EEE8AA;
    scrollbar-track-color: #000000;
    scrollbar-arrow-color: #EEE8AA;
    }
    There are other formats that will work, this just happens to be my preferred format. Remember that there is more than one way to skin a cat, so to speak. That’s all there is to CSS Scrollbar modification, and I hope you found this tutorial useful.

    -Zen




    This Tutorial ©2003 FallenZen. If you wish to use this tutorial on your site, please leave this credit intact.
    Check out The DigitalZen (http://www.digitalzen.org).
    \"We change by the speed of the choices that we make.\"

  2. #2
    Junior Member
    Join Date
    Nov 2002
    Posts
    8
    Nice one

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •