Olá sejam muito bem vindos ao ilovehtml. Estamos de volta e de cara nova, tanto aqui, quanto no nosso blog. Gostariamos de agradecer todo carinho dos nossos seguidores. Hoje composto por quatro moderadoras o ilovehtml quer se tornar um dos melhores meios sobre HTML por aqui, esperamos surpreender vocês com tutoriais novos, themes novos, tudo novo. Em breve vamos estar criando promoções ou outra coisa, para poder prestigiar os nossos queridos seguidores, fiquem ligados nas novidades por aqui.




Em breve novas parcerias, fique ligado.








Você é livre para fazer suas escolhas, mas é prisioneiro das consequências. - Pablo Neruda

Como personalizar a barra de rolagem.
01- Coloque esse código no seu CSS:

html::-webkit-scrollbar {width:22; height:auto;background: #FFF;}
html::-webkit-scrollbar-corner { background: #FFF;}
html::-webkit-scrollbar-button:vertical {height:1px;display:block;}
html::-webkit-scrollbar-button:horizontal {width:1px;display:block;}
html::-webkit-scrollbar-thumb:vertical {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);border: 1px solid  #A2A2A2;border-right:none;-webkit-border-radius: 8px;}
html::-webkit-scrollbar-thumb:horizontal {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);border: 1px solid #A2A2A2;border-bottom;}
html::-webkit-scrollbar-thumb  {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);}
html::-webkit-scrollbar-thumb:hover {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);border: 1px solid  #A2A2A2;}
html::-webkit-scrollbar-track-piece {background: none;}
html::-webkit-scrollbar:vertical {border-left: 1px solid #A2A2A2;}
html::-webkit-scrollbar:horizontal {border-top: 1px solid #A2A2A2;}

Lembre-se de mudar aonde tem escrito: LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM, para o link da imagem da barrinha. Se vocês olharem na seção de backgrounds vão achar varias imagens lindas para a barrinha.

Créditos: things-4you

Postado por I Love HTML. 12:05. 5 Comentários


5 Comentários:

Às 16 de julho de 2012 17:42 , Anonymous Anônimo disse...

Tem como deixar ela redondinha ?

 
Às 13 de agosto de 2012 19:00 , Blogger Anonymus disse...

Tem como remover a barra de rolagem?

 
Às 24 de fevereiro de 2013 08:36 , Anonymous Bianca disse...

Ótimo o tutorial! Mas eu queria saber se tem como colocar aquelas setinhas que ficam no topo e em baixo da barra... eu coloquei um background de setinha em -webkit-scrollbar-button, só que não deu certo, ficou a mesma seta em cima e em baixo. Por favor me respondam <3 Quem bom que vocês voltaram! :3

 
Às 14 de maio de 2014 14:10 , Anonymous Daniel disse...

Amei era oq eu tava procurando muito obrigado gostei muito do post e do site

 
Às 8 de setembro de 2014 20:46 , Anonymous Anônimo disse...

Para arredondar a barra de rolagem tentem usar o propriedade box-radius:10px;

 

Postar um comentário

- Elogie, critique, mas faça isso com educação.
- Se seu comentário estiver com palavrões de baixo calão será excluído.

Assinar Postar comentários [Atom]

<< Página inicial