05/08/2012

Tutorial : Barra de rolagem redonda .

Hey , meus queridos ! Como vão ? Anteriormente eu já tinha postado um Tutorial de como personalizar a barra de rolagem (www) , agora vou ensina - lo novamente , só que a barra ficará redonda .  Vamos aprender ? Confira >>
A barra ficará assim :

Vá no seu HTML , dê Ctrl + F ou F3 e procure por : ]]></b:skin>
Assim que encontra - lo , cole o código abaixo ANTES dele :

::-webkit-scrollbar-thumb:vertical {
background: #FF69B4;
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: url(URL DO BACKGROUND FIXO) repeat;
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;}
}
No primeiro trecho destacado , você irá trocar pela cor que você queira que seja sua barrinha . Tabela : (www) .
E por fim , no segundo trecho  destacado coloque a url do background .
Visualize e se estiver tudo certo , salve !
Créditos : (www) .

Nenhum comentário:

Postar um comentário

-Primeiro , não não peça Tutoriais / Materiais pelos comentários , use a Ask - me .
-Não desrespeite ninguém , tenha educação .
- Comente sobre o post .
- Deixe a sua url no fim do cometário para que eu posso lhe retribuir o mesmo .