Skip to content

Instantly share code, notes, and snippets.

@monicams
Created September 26, 2012 10:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save monicams/3787120 to your computer and use it in GitHub Desktop.
Save monicams/3787120 to your computer and use it in GitHub Desktop.
Colourful and arrowless scrollbar
/* -----------------------------------------
nice scrollbar
----------------------------------------- */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width:320px) {
::-webkit-scrollbar { width: 10px;}
::-webkit-scrollbar-button:start:decrement {display: block;height: 10px;}
::-webkit-scrollbar-button:end:increment {display: block; height: 10px;}
::-webkit-scrollbar-track-piece { background:
-webkit-gradient(
linear,
0 0,
100% 0,
from(rgba(0,0,0,0.2)),
to(rgba(0,0,0,0.12))
);
-webkit-box-shadow: 0 1px 0 0 rgba(163,21,20,0.35);
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:vertical{
background:
-webkit-gradient(
linear,
0 0,
100% 0,
from(#a31514),
to(#ef3939)
);
-webkit-border-radius: 6px;
border: 2px solid #a31514;
-webkit-background-clip: padding-box;
}
::-webkit-scrollbar-track-piece:horizontal{ background: none; -webkit-box-shadow:none;}
::-webkit-scrollbar:horizontal{height: 16px; }
::-webkit-scrollbar-thumb:horizontal{ height: 12px;-webkit-border-radius:12px;
background:
-webkit-gradient(
linear,
0 0,
0 100%,
from(rgba(0,0,0,0.1)),
to(rgba(0,0,0,0.25))
);
border: 6px solid transparent;
-webkit-background-clip: padding-box;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment