css3 Webkit Scrollbars - Αλλάξτε την πλευρική μπάρα

Δείτε τα δύο άρθρα που αφορούν το συγκεκριμένο θέμα στο tetsitech εδώ:

Όλα τα scrollbar που σας δείχνω στα παραδείγματα είναι αληθινά και όχι εικόνες. Μπορείτε να τα δοκιμάσετε.

::-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;}
::-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;}
::-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;}
::-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;}
::-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));}
::-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)}
::-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)));}
::-webkit-scrollbar-track{
 border: 1px solid black;
 background-color: #F5F5F5;}
::-webkit-scrollbar{
 width: 10px;
 background-color: #F5F5F5;}
::-webkit-scrollbar-thumb{
 background-color: #000000;}
::-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)}
::-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)}
::-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)}
::-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)}
::-webkit-scrollbar-track{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #CCCCCC;}
::-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)}
::-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)}
::-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))}
::-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-linear-gradient(top,#e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);}
::-webkit-scrollbar{
 color:white;
 background-color:white;
 height:10px;
 width:10px;
 -webkit-box-shadow:2px 2px 6px rgba(0,0,0,.2) inset;}
::-webkit-scrollbar-thumb{
    border-radius:16px;
 background:-webkit-linear-gradient(white, #a2c347 50%, white);
 -webkit-box-shadow:2px 2px 6px rgba(0,0,0,.5),inset -2px 2px 2px rgba(204,204,204,0.1),inset 2px -2px 2px rgba(0,0,0,0.2);}
::-webkit-scrollbar-thumb:hover{
 background:-webkit-linear-gradient(#a2c347, white 50%, #a2c347);}
::-webkit-scrollbar-thumb:active{
 background:-webkit-linear-gradient(#a2c347, #a2c347);}





Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Φόρμα επικοινωνίας

Όνομα

Ηλεκτρονικό ταχυδρομείο *

Μήνυμα *