Get Latest Tricks Alert Daily
Follow Readers

How To Change Scrollbar Color With css3 ?


SHARE:

scrollbar
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.

scrollbar


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:



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!

 

10 comments:

  1. Didn't work for mine and I have Firefox

    ReplyDelete
    Replies
    1. @ Cassie Paige Tejada

      This tricks only works only in google chrome
      if you want to change in firefox you have to install addons
      but its works only in your browser..

      Delete
  2. how to change the color of scroll track. I applied this on my blog this my blog.
    This is my blog http://techexplanation.blogspot.in/ .

    Thanks.

    ReplyDelete
    Replies
    1. @Ashwin Singh

      Replace this (186,35,35,0.8) code with RGB Color by using photoshop

      Delete
  3. Talk to your customers and take your time on getting reviews about different products.
    Social Media Marketing Riyadh

    ReplyDelete
  4. very informative articular, Thanks for sharing this
    http://mybloggertools.com/

    ReplyDelete
  5. Thank you so much for your post. This post really help me a lot and I have learnt some new things from your blog.
    Mobile Development

    ReplyDelete