Stylish Webkit Scrollbar with CSS
Webkit scrollbar made with gradients. no images. but looks awesome!
Align my contents to center of the screen!
.wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
Now Scrollbar
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 500px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
overflow-y: scroll;is used make it possible to scroll vertically!
.force-overflow
{
min-height: 450px;
} userd to force overflow!
Below is important that what made our cute scrollbar!
::-webkit-scrollbar-track
{
background: #fc6286;
background: -moz-linear-gradient(left, #fc6286 0%, #860221 50%, #660018 51%, #e1093b 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fc6286), color-stop(50%,#860221), color-stop(51%,#660018), color-stop(100%,#e1093b));
background: -webkit-linear-gradient(left, #fc6286 0%,#860221 50%,#660018 51%,#e1093b 100%);
background: -o-linear-gradient(left, #fc6286 0%,#860221 50%,#660018 51%,#e1093b 100%);
background: -ms-linear-gradient(left, #fc6286 0%,#860221 50%,#660018 51%,#e1093b 100%);
background: linear-gradient(to right, #fc6286 0%,#860221 50%,#660018 51%,#e1093b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc6286', endColorstr='#e1093b',GradientType=1 );
}
::-webkit-scrollbar { width: 10px; background-color: #000; }
::-webkit-scrollbar-thumb { background: #aebcbf; background: -moz-linear-gradient(-45deg, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); background: -webkit-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); background: -o-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); background: -ms-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); background: linear-gradient(135deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=1 ); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px cursor:pointer; }