background-image: url(URL address of your image);

Tuesday, 10 May 2016

14th Best Scrollbars for Blogger

css scrollbar style

Tuni cu na Blogger chung ah "Scrollbars" thleng ningcang tete tlawmbal ka van langh ter duh than. Hi Scrollbars thleng a duhmi hna caah tiah kan van langh ter hlei ah a thiam lo mi le a herh mi tete kan um sual ah tiah ka van langh ter than.

A tuah ning fawi tuk!

1) Hmasa bik ah na blogger on law Template>>Customize ah kal piak ding.
2) Na tuahmi tlam a tling cang ahcun, Advanced kha Click law CSS box chung ah a tang lei Code hi Copy law Paste piah..
3) Apply to Blog hmeh ding!

Scrollbars caah na duhmi naa thim kho.

1)
Blue lined css Scrollbar style

 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 background-color: #3366FF;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(0deg,
                                           rgba(255, 255, 255, 0.5) 25%,
             transparent 25%,
             transparent 50%,
             rgba(255, 255, 255, 0.5) 50%,
             rgba(255, 255, 255, 0.5) 75%,
             transparent 75%,
             transparent)
}

2)
Green CSS Scrollbar style

 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
            40% 0%,
            75% 84%,
            from(#4D9C41),
            to(#19911D),
            color-stop(.6,#54DE5D))
}

3)


Red N' Black css Scrollbar

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #444444;
}
::-webkit-scrollbar
{
 width: 12px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
             transparent,
             rgba(0, 0, 0, 0.4) 50%,
             transparent,
             transparent)
}

4)
Gray gradient css Scrollbar

 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
 background-color: #CCCCCC;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 background-color: #FFF;
 background-image: -webkit-linear-gradient(90deg,
                                           rgba(0, 0, 0, 1) 0%,
             rgba(0, 0, 0, 1) 25%,
             transparent 100%,
             rgba(0, 0, 0, 1) 75%,
             transparent)
}

5)





Black N Grey css Scrollbar style

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-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)
}

6)
Orangey css Scrollbar style

 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-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)
}

7)


Balcky css Scrollbar style

::-webkit-scrollbar-track
{
 border: 1px solid black;
 background-color: #F5F5F5;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 background-color: #000000; }

8)
 Blue grad css scrollbar style

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-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)));
}

9)
Orange shaded css Scrollbar style

 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-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)
}

10)


Bluety css Scrollbar style

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-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));
}

11)
Blacky I css scrollbar style

 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 background-color: #000000;
 border: 2px solid #555555;
}

12)




Balcky css scrollbar style

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
::-webkit-scrollbar
{
 width: 6px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 background-color: #000000;
}

13)
Red-Shade css scrollbar style

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar
{
 width: 12px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #D62929;
}

14)

Grey css Scrollbar style

 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar
{
 width: 12px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #555;
}

0 comments:

Post a Comment