Saturday 19 May 2012

CSS Styles for Scrollbars (Google Chrome)


  1. Create a CSS file and include some scrollbar styles in it (say style.css)...
::-webkit-scrollbar {
height: 12px;
width:12px;
background: #A3C1F7;
-webkit-border-radius: 1ex;
}
::-webkit-scrollbar-thumb {
/*chrome 10*/
background-image: -webkit-gradient(radial, center center, 0, center center, 437, color-stop(0, #0053FA), color-stop(1, #A49FF4));
/*chrome 11+ */
background-image: -webkit-radial-gradient(center, circle cover, #0053FA 0%, #A49FF4 100%);
-webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #A3C1F7;
}
  1. Create a HTML file and include the above stylesheet (say index.html)
<html>
<head>
<title> coldsoftmail </title>
<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body>
<p style="font-size: 100px;">
Hai this is coldsoftmail <br>
Hai this is coldsoftmail <br>
Hai this is coldsoftmail <br>
Hai this is coldsoftmail <br>
Hai this is coldsoftmail
</p>
</body>
</html>

No comments:

Post a Comment