07 setembro 2012

Barra de Rolagem Redonda


Hooy! *-*
Gostaram na barra de rolagem nova? Eu gostei eu adora barrinhas bem redondinhas e ém bem fácil de fazer:
Procura por:

E acima cola:
::-webkit-scrollbar-thumb:vertical {
background: #ffffff;
height:50px;
border: 2px solid #FFFFFF;
box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #beFbdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: #000000;
box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}
}
 Substitui o código da cor a vermelho pelo código da cor da pequena barrinha que rola, vê o código da cor aqui.
E substitui também o código a rosa pela cor do fundo onde a barrinha rola.

Tenho aqui outro modelo de barrinha fui eu que criei através daquela e não vi em nenhum blog, por isso não copiem por favor, é fácil de fazer só que em vez de colocar aquela código coloca este:

::-webkit-scrollbar-thumb:vertical {
background: #FFC0CB;
height:50px;
border: 2px solid #FFFFFF;

}
::-webkit-scrollbar-thumb:horizontal {
background-color:#FFC0CB; height:10px;
webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: #FFEC8B
;

}
 Substitui o código da cor a vermelho pelo código da cor da pequena barrinha que rola, vê o código da cor aqui.
E substitui também o código a rosa pela cor do fundo onde a barrinha rola.

Espero que tenhas gostado qualque dúvida comenta!


Sem comentários:

Enviar um comentário