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