Bishal Creations Complete PC Solutions And Games Download

How To Change Scrollbar Color With css3 ?

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

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

]]></b:skin>


after finding this code, add this css3 code above


 /* Bishal Creations Scrollbar with CSS3 */
::-Bc-scrollbar {
width: 8px; height:8px;
}
::-BC-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-BC-scrollbar-thumb {
background: rgba(186,35,35,0.8);
-BC-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-BC-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
Happy Blogging!/pre>
Previous
Next Post »
Post A Comment Using..

No comments :

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Notify Me" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.
ConversionConversion EmoticonEmoticon