CSS3 Webkit Scrollbars Blogger

CSS3 Webkit Scrollbars Blogger

Đây là một vài  CSS3 webkit thanh cuộn. chỉ hiện thị tốt trên mấy ông như Chrome hoặc Safari . một vài Code cho bạn thích trang trí thêm ...
8 Comment 2/01/2013
CSS3 Webkit Scrollbars Blogger
Đây là một vài  CSS3 webkit thanh cuộn. chỉ hiện thị tốt trên mấy ông như Chrome hoặc Safari.
một vài Code cho bạn thích trang trí thêm cho Blogger của bạn ngầu hơn.
có 16 Style. bạn chọn 1 cái trong số đó và chèn trước: ]]></b:skin>

/*1
-----------------------------------------------------------------*/
#style-1::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;}
#style-1::-webkit-scrollbar{width: 12px;background-color: #F5F5F5;}
#style-1::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #555;}
/*2
----------------------------------------------------------------------*/
#style-2::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;}
#style-2::-webkit-scrollbar{width: 12px;background-color: #F5F5F5;}
#style-2::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #D62929;}
/*3
--------------------------------------------------------------------*/
#style-3::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
#style-3::-webkit-scrollbar{width: 6px; background-color: #F5F5F5;}
#style-3::-webkit-scrollbar-thumb{background-color: #000000;}
/*4
--------------------------------------------------------------------*/
#style-4::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
#style-4::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}
#style-4::-webkit-scrollbar-thumb{background-color: #000000;border: 2px solid #555555;}
/*5
--------------------------------------------------------------------*/
#style-5::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
#style-5::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}
#style-5::-webkit-scrollbar-thumb{background-color: #0ae;background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));}
/*6
--------------------------------------------------------------------*/
#style-6::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
#style-6::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}
#style-6::-webkit-scrollbar-thumb{background-color: #F90;background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%, transparent)}
/*7
--------------------------------------------------------------------*/
#style-7::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;border-radius: 10px;}
#style-7::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}
#style-7::-webkit-scrollbar-thumb{border-radius: 10px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)),color-stop(0.86, rgb(28,58,148)));}
/*8
--------------------------------------------------------------------*/
#style-8::-webkit-scrollbar-track{border: 1px solid black;background-color: #F5F5F5;}
#style-8::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}
#style-8::-webkit-scrollbar-thumb{background-color: #000000;}
/*9
--------------------------------------------------------------------*/
#style-9::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;}
#style-9::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}
#style-9::-webkit-scrollbar-thumb{background-color: #F90;background-image: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)}
/*10
--------------------------------------------------------------------*/
#style-10::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: #F5F5F5;border-radius: 10px;}
#style-10::-webkit-scrollbar{width: 10px;background-color: #F5F5F5;}
#style-10::-webkit-scrollbar-thumb{background-color: #AAA;border-radius: 10px; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%,transparent 25%,transparent 50%,rgba(0, 0, 0, .2) 50%,rgba(0, 0, 0, .2) 75%,transparent 75%,transparent)}

---------------------------------HẾT-------------------------------*/
DEMO