Personalizando a barra de rolagem

We♥It

Trouxe um tutorial para deixar a barra de rolagem colorida, assim como o do Mentes Velhas. Foi tirado do blog Meia noite e quinze, mas nesse tutorial só ensina como mudar a barra vertical, e a horizontal fica padrão. Mas vou lhes ensinar a mudar as duas.

Vá em Designe, Editar HTML e ache o código ]]></b:skin> (Ctrl +f)

Acima desse código, coloque o seguinte:

::-webkit-scrollbar-thumb:vertical {

background: #000000;

height:50px;

border: 2px solid #fff;

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 #bebdbd;

-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:#000000; height:10px;

border: 1px solid #fff;

-webkit-box-shadow:0 0 1em #eee; }

::-webkit-scrollbar {height:10px; width:20px; background: #e7e0c6 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;}



Entendendo o código:

A parte em VERDE, é a cor da barra. , é a cor da borda da barra para
A parte assim, é a cor da borda da barra
Se você quiser que a barra VERTICAL fique sem bordas arredondas, tire a parte em NEGRITO
Se quiser que a linha fique pontilhada ------ mude solid para dashed
Cor cor da parte em que fica a barra
Atenção à parte sublinhada, ela mostra onde é HORIZONTAL e VERTICAL!
Para visitar a tabela de cores!


Qualquer dúvida, comente.

Chegamos aos tão sonhados 60 seguidores. Obrigado a todos vocês. 1500 visualizações