blueScrollBar Webkit

CSS-only with blue gradient, radii Tradeoffs: have to use image for track to get narrow slot look The thumb size is set by OS, v_scroll thumb height propostional to amount of content clipped in the viewport.

by David McClelland

HTML

<html>
<head>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
<div class="example">
    <div id="main_content" style="height:90%;">
        <div class="parent">
            <h2>Arkady and Boris Strugatsky. Poor cruel folk</h2>
            <div>The King sat naked. Like a foolish pauper on the street, he sat leaning
                against  a  cold  wall, drawing in his blue, goose-bumped legs. He shivered,
                with his eyes closed, he listened, but everything was quiet.</div>
            <div>He awoke at midnight from a nightmare and immediatelly understood  that
                he  was  finished.  Some  one  weezed and writhed by the door of the bedroom
                suite, he heard footsteps, metalic jingling and  drunken  mummbling  of  His
                Highness,  Uncle  Buht: "Let me through... Let me.. Break it down, hell with
                it..." Wet with icy sweat, he slintly rolled off  his  bed,  ducked  into  a
                secter  closet,  and  loosing  himself  he ran down the underground passage.
                Something sqelched under his bare feet, the startled rats dashed  away,  but
                he  did  not notice anything, just now, sitting next to a wall he remembered
                everything; the darkness, the slippery walls, and the pain from  a  blow  on
                the  head against the shakled door to the temple, and his own unberable high
                yelp.</div>
            <div>They shall not enter here, he thought. No one shall enter here. Only if
                the King  order's  so.  But  the  King  shall  not  order...  He   snickered
                hysterically. Oh no, the King will not order! He carefully un screwed up his
                eyes  and  saw  his  blue, hairless legs with scraped knees. Still alive, he
                thought. I will live, because they shall not enter here.</div>
            <div>Everything in the temple  was  blueish  from  the ...

CSS

body {
    background:#eee;
    margin:0;
    padding:0;
}

.example {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    background:#FFF;
    border:1px #000 solid;
    height:600px;
    margin:20px auto;
    padding:15px;
    position:relative;
    width:800px;
}

#main_content {
    height:50%;
    left:5%;
    overflow:auto;
    position:absolute;
    top:5%;
    width:90%;
}

/* CSS Document */
html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0 0 0 0;
    font-size: 14;
    font-family: Arial, Helvetica, sans-serif;
}

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

/*
:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.
:vertical – The vertical...
:decrement – applies to buttons and track pieces. if the button or track piece will decrement the view’s position when used
            (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).
:increment – opp. of above
:start – applies to buttons and track pieces. It indicates whether the object is placed before the thumb.
:end – ...after the thumb.
:double-button – applies to buttons and track pieces. Is button paired up together at the same end of a scrollbar.
                For track pieces it indicates whether the track piece abuts a pair of buttons.
:single-button – It is used to detect whether a button is by itself at the end of a scrollbar.
                For track pieces it indicates whether the track piece abuts a singleton button.
:no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar,
             i.e., there is no button at that end of the track.
:corner-present – Applies to...