Thursday, January 31, 2013

Simple CSS to create Modern style Scroll Bar like Google

This is the smallest tutorial posted by us. But we think this is very useful because everyone want to give their website a look that is modern and incomparable. So today here we have a very simple, compatible and easy to use CSS code to give your website's scroll bar a new and modern look.
CSS code for modern scroll bar
So just copy the below mentioned CSS code, add it to your existing stylesheet, and you will get an all new scroll bar like Google. You can also change the color and width of the scroll bar as per your requirements. So just copy this CSS code and start experimenting with your website's scroll bar.

  CSS code :  


::-webkit-scrollbar {
width: 15px; // to adjust width
}
::-webkit-scrollbar-track {
background: #FFFFFF;
-webkit-box-shadow: inset 1px 1px 2px #E0E0E0;   
border: 1px solid #D8D8D8;  //color of the track of scroll bar
}
::-webkit-scrollbar-thumb {
background: #646464;
-webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);  
}
::-webkit-scrollbar-thumb:hover {
background: #aaaaaa;
}
::-webkit-scrollbar-thumb:active {
background: #888;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}


Enjoy the code, and do share this amazing little CSS code with your friends. If you face any problem, do comment and ask.



1 comment: