Tutorial: Barra de Rolagem Personalizada Tipo 2

Vamos ao meu primeiro tutorial! Aiii que legal!,  é como fazer uma barra de rolagem personalizada bem legal! Igual a que eu usei aqui no Laura5Mais!

1. Vá até o seu HTML, ultilando o comando CTRL F procure por:

]]></b:skin>

 2. Cole o código abaixo acima da tag destacada em laranja

::-webkit-scrollbar-thumb:vertical {<br /> background: #e7b3c2;<br /> height:50px;<br /> border: 2px solid #fff;<br /> box-shadow: 2px 2px 4px #bebdbd;<br /> -moz-box-shadow: 2px 2px 4px #bebdbd;<br /> -webkit-box-shadow: 2px 2px 4px #bebdbd;<br /> -khtml-box-shadow: 2px 2px 4px #bebdbd;<br /> -moz-border-radius: 10px; /* Para Firefox */<br /> -webkit-border-radius: 10px; /*Para Safari e Chrome */<br /> border-radius: 10px; /* Para Opera 10.5+*/<br /> }<br /> ::-webkit-scrollbar-thumb:horizontal {<br /> background-color:#f26d92; height:10px;<br /> border: 1px dashed #fff;<br /> -webkit-box-shadow:0 0 1em #eee; }<br /> ::-webkit-scrollbar {height:10px; width:20px; background: url(FUNDO DA BARRA DE ROLAGEM) repeat;<br /> box-shadow: -3px -2px 10px #bebdbd;<br /> -moz-box-shadow: -3px -2px 10px #bebdbd;<br /> -webkit-box-shadow: -3px -2px 10px #bebdbd;<br /> -khtml-box-shadow: -3px -2px 10px #bebdbd;}

Pra personalizar, ultilize esse site!


Simples Não? Kissuus

Créditos:

Spazio DM