How To Change Scrollbar Color With css3 ?

SHARE:

Every one knows what is scrollbar? scrollbar is a scrolling bar which scrolls the page up and down and right to left, you can find it at right side of every browser. Now here changing the design of scrollbar and its color with css3 webkit.
This Css3 Webkit will replace the original html scrollbar to customized Css3 scrollbar.

That old days gone this is 3rd generation latest technology make your blog like a professional website, everyone wants to make they template attractive and good look. Now make your blogger template looks beautiful with the help of css3. Today i am going to show how to change your web page scrollbar's color and its design with Css3 Webkit Technique, give your blogger template a proffesionl look, to attract visitor.

Here i have override the Html css code with css3 to change html scrollbar, this css3 webkit feature being added to html by overriding the css code ant it will change old white scrollbar to colored scrollbar and its width, this scrollbar give a beautiful look to your blog/website.

Adding code to stylesheet

Goto > Template > Edit Html >
Find below code by pressing crtl + F

]]></b:skin>

after finding this code, add this css3 code above

/* Webkit override Scrollbar with CSS3 */
::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(186,35,35,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(186,35,35,0.4);

for example

Your Code Here
]]></b:skin>

Now save your template Done!

Note: this trick works only in Mozilla Firefox, google chrome, IE9+ browsers

Please Subscribe/Join our news later by entering your name and email id below form

SHARE: