Goodies


Tutorial: Barra de rolagem colorida e personalizada

Tumblr_m18qgqfbtk1qzlnv7o1_500_large


Oi cangurus do morro dos alcachofres - já parei

Vim aki com um tutorial ( uhul, mas um tutorial pra minha pagina de goodies )
ensinando como por uma barra de rolagem, colorida e personalizada.
O que é barra de rolagem? Olha ali no canto >.> Tem um coiso preto, pra ir pra baixo né?
Isso é uma barra de rolagem.
Se vocês não entenderam o que é uma barra de rolagem, olha uma foto:



Agora que você já sabe o que é uma barra de rolagem vamos ao tutorial.

Vá no seu html e pesquise (Ctrl + F) por: ]]></b:skin>


E cole antes do que você pesquisou, esse código:

/*** Rolagem da Vertical da Página ***/
::-webkit-scrollbar-thumb:vertical {
background: #ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:50px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

}
/*** Rolagem da Horizontal da Página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0f72; /*Cor da barrinha que se move*/
border: 1px solid #bgh; /*Coloque borda se quiser*/
height:10px;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

}
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*Largura da barra de rolagem*/
background: #000000; /*Cor da parte fixa, que fica no mundo*/
border: 1px solid #bgh; /*Coloque borda se quiser*/

Aí é só personalizar do seu jeito, tabela de cores aqui. Se não quiser borda arredondada, apague as partes que estão em negrito.


Se tiverem alguma duvida, se deu erro, se querem algum tutorial, me avisem.

Créditos: Sweet Mulberry e I don't care