Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Yesterday i posted an article about Changing Scroll-Bar In Blogger and today i'll show you 5 cool scroll bar to use in your blog and documents.
Scroll-Bar #1 :
::-webkit-scrollbar { height:12px; width: 12px; background:#646060; } ::-webkit-scrollbar-thumb { background-color: lightgray; }
Scroll-Bar #2 :
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Scroll-Bar #3 :
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #AAA;
border-radius: 10px;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, .2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, .2) 50%,
rgba(0, 0, 0, .2) 75%,
transparent 75%,
transparent)
}
Scroll-Bar #4 :
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #FFF;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
background: #CCC;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover {
background: #AAA;
}
::-webkit-scrollbar-thumb:active {
background: #888;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}
Scroll-Bar #5 :
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
If you got a cool scroll-bar design then please send it to me.....Thanks!
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
