Tuesday, 14 February 2012

Add Custom Scrollbar in Chrome!!! - Nulled by Ishan -- Google

Friends I nulled the code for custom slider which you see in Gmail for me. Then Idea came to null more code. As a result I found!!!

Add this code before </head> tag in html.

<style>
/* DEMO at DOWNLOADFREEGAME.BlogSpot.com */
::-webkit-scrollbar {
  width: 13px;
  height: 13px; }
::-webkit-scrollbar:hover {
  height: 18px; }
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  height: 15px;
  width: 13px;
  display: block;
  background: #101211;
  background-repeat: no-repeat; }
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url(http://www.coffeepowered.net/wp-content/themes/aurora/scrollbar/horizontal-decrement-arrow.png);
  background-position: 4px 3px; }
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url(http://www.coffeepowered.net/wp-content/themes/aurora/scrollbar/horizontal-increment-arrow.png);
  background-position: 3px 3px; }
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url(http://www.coffeepowered.net/wp-content/themes/aurora/scrollbar/vertical-decrement-arrow.png);
  background-position: 3px 4px; }
::-webkit-scrollbar-button:vertical:increment {
  background-image: url(http://www.coffeepowered.net/wp-content/themes/aurora/scrollbar/vertical-increment-arrow.png);
  background-position: 3px 4px; }
::-webkit-scrollbar-button:horizontal:decrement:active {
  background-image: url(http://www.coffeepowered.net/wp-content/themes/aurora/scrollbar/horizontal-decrement-arrow-active.png); }
::-webkit-scrollbar-button:horizontal:increment:active {
  background-image: url(http://www.coffeepowered.net/wp-content/themes/aurora/scrollbar/horizontal-increment-arrow-active.png); }
::-webkit-scrollbar-button:vertical:decrement:active {
  background-image: url(http://www.coffeepowered.net/wp-content/themes/aurora/scrollbar/vertical-decrement-arrow-active.png); }
::-webkit-scrollbar-button:vertical:increment:active {
  background-image: url(http://www.coffeepowered.net/wp-content/themes/aurora/scrollbar/vertical-increment-arrow-active.png); }
::-webkit-scrollbar-track-piece {
  background-color: #151716; }
::-webkit-scrollbar-thumb:vertical {
  height: 50px;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
  border: 1px solid #0d0d0d;
  border-top: 1px solid #666666;
  border-left: 1px solid #666666; }
::-webkit-scrollbar-thumb:horizontal {
  width: 50px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
  border: 1px solid #1f1f1f;
  border-top: 1px solid #666666;
  border-left: 1px solid #666666; }
</style> 

WANT OTHER SCROLLBAR LIKE UBUNTU O.S.


<style>
::-webkit-scrollbar-track-piece{
 background-color:#fff;
 -webkit-border-radius:0;
}
::-webkit-scrollbar{
 width:8px;
 height:8px;
}
::-webkit-scrollbar-thumb{
 height:50px;
 background-color:#999;
 -webkit-border-radius:4px;
 outline:2px solid #fff;
 outline-offset:-2px;
 border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
 height:50px;
 background-color:#9f9f9f;
 -webkit-border-radius:4px;
}
Save the file and reload your tabs to see the change.
As you can see it’s basic CSS so, if you wish, you can easily modify the code to your liking.
For example, if you find the scroll bar too thin change its width by editing this part:
::-webkit-scrollbar{
 width:16px;
}
</style>


WANT THE UGLY 3 coloured(green,yellow,violet)
<style>
/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}
::-webkit-scrollbar-button:vertical {
    background-color: red;
    border: 1px dashed blue;
}
/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
}
/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
    background-color: black;
    border: 1px dashed blue;
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
    background-color: purple;
    border: 1px dashed blue;
}
::-webkit-scrollbar-track:vertical {
    background-color: blue;
    border: 1px dashed pink;
}
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
    border: 1px solid #000;
}
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
    border: 1px dashed pink;
}
/* Track below and above */
::-webkit-scrollbar-track-piece {
    background-color: green;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: yellow;
}
/* Corner */
::-webkit-scrollbar-corner:vertical {
    background-color: black;
}
/* Resizer */
::-webkit-scrollbar-resizer:vertical {
    background-color: gray;
</style> 

Scrollbar of Google

ALSO  I -  ISHAN NULLED SCROLLBAR OF GOOGLE!!! YOU CAN'T FIND THAT CODE ANYWHERE EXCEPT HERE!!!



<style>
::-webkit-scrollbar-track-piece{
 background-color:#fff;
 -webkit-border-radius:0;
}
::-webkit-scrollbar{
 width:15px;
 height:8px;
}
::-webkit-scrollbar-thumb{
 height:20px;
 background-color:#cbcbcb;
 -webkit-border-radius:4px;
 outline:2px solid #fff;
 outline-offset:-2px;
 border: 0.1px solid #b7b7b7;
}
::-webkit-scrollbar-thumb:hover{
 height:50px;
 background-color:#909090;
 -webkit-border-radius:4px;
}

::-webkit-scrollbar{
 width:16px;
}
</style>

ALSO WANT THE SCROLLBAR WITH HIGH LEVEL OF PADDING


<style>
/* For the "inset" look only */
html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Handle */
::-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);
}
</style>