PLAY
Últimos artigos
Página inicial
Compartilhar
Escrever artigo
Denunciar
Atalhos no teclado
Enviar feedback
Sobre a Wikiblogs
Voltar
Atualizar página
Sugestões de pesquisa
Carregando...
Start a Hangout
Iniciar um Hangout sobre essa página
Personalizar as barras de rolagem da página

quinta-feira, 30 de agosto de 2012

Personalizar as barras de rolagem da página

Certamente você já deve ter visto em algum site uma barra de rolagem personalizada (Como no Facebook, Google+, etc), bom neste tutorial vou ensinar a fazer esse mesmo efeito. Primeiramente abra o bloco de notas no seu windows e cole o código abaixo (ou edite na caixa mesmo). ::-webkit-scrollbar {width: 11px;height: 11px;} ::-webkit-scrollbar-track-piece:vertical {background: white;border-left:1px solid #444} ::-webkit-scrollbar-track-piece:horizontal {background: white;border-top:1px solid #444} ::-webkit-scrollbar-thumb:vertical {height: 20px;background: #545454;border: 1px solid #333;border-radius: 8px;} ::-webkit-scrollbar-thumb:horizontal {height: 20px;background: #545454;border: 1px solid #333;border-radius: 8px;} Alter os valores como desejar.


  • Na primeira linha você define a largura (width) e a altura (height).
  • Na segunda linha você personaliza a parte da barra que não se mexe (a parte branca).
  • Na terceira linha você colocar o mesmo código da segunda (a terceira linha é para personalizar a parte branca da barra de rolagem de baixo da página).
  • Na quarta linha você personsonaliza a barra que o usuário vai puxar para descer no site. (coloque o mesmo código na quinta linha).
background: #545454; (cor do plano de fundo)
border: 1px solid #333; (bordas)
border-radius: 8px; (arredondar as bordas)
Para achar as cores certas, use uma tabela de cores. Depois coloque esse código na tag style do seu site ou se estiver no blogger coloque antes de ]]>
.
Avançado

Em alguns sites, não fica legal usar barra de rolagem em tudo, e um jeito de personalizar somente em alguns elementos é colocar uma classe para para a scrollbar. Para isso basta colocar na frente de cada linha a classe que deseja usar a scrollbar personalizada. Exemplo: .dsw::-webkit-scrollbar-thumb:vertical {height: 20px;background-color: rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.2)} Ou usar com uma ID: #dsw::-webkit-scrollbar-thumb:vertical {height: 20px;background-color: rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.2)} Ou em uma Tag especifíca: div::-webkit-scrollbar-thumb:vertical {height: 20px;background-color: rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.2)} Pronto agora o seu site tem barras de rolagem personalizadas.
Aviso: Este código só funciona no navegador Google Chrome.

Nenhum comentário:

Postar um comentário