Busca

Carregando...

terça-feira, 24 de junho de 2014

CSS | Barra de rolagem colorida no Google Chrome

Atualizado dia 21/07/2016.

Este post poderia ter sido publicado mais cedo, só que eu fiquei empolgada testando 1001 peruices com o código e criando exemplos. Adoro barra de rolagem colorida! #prontoconfessei

No dia 29/06/2014 adicionei o exemplo de barra de rolagem listrada que muda de cor, sem uso de imagem.

Para quem ainda é inocente na internet (sabe de nada), esse recurso era muito comum no fim da década de 90 e no início da década passada. Blogueiros e webdesigners (me incluo) usaram e abusaram das barras de rolagem coloridas, até que ficou demodê. Mas, como todo mundo que tem mais de 20 anos já notou, tudo que fica demodê depois de um tempo fica vintage e daí vira moda de novo.

Calma! Não disse que já virou moda de novo. No momento é só vintage.

O código que colore a barra de rolagem naquele navegador indesejado eu já mostrei no post Barra de rolagem colorida no Internet Explorer. Ele é antigo, mas não tem problema porque o código não mudou desde 2005.

Já no Google Chrome e em todos os navegadores que usam webkit, como Chromium e as versões atuais do Flock e do Opera, você consegue essa modificação usando pseudo-elementos CSS. O código é o seguinte:

::-webkit-scrollbar {background: #99cc00;} /* barra de rolagem toda */ ::-webkit-scrollbar-thumb {background: #000000;} /* parte da barra que se movimenta */ ::-webkit-scrollbar-button {background:#ffffff;} /* ponta da barra de rolagem */ ::-webkit-scrollbar-track {background:#ffffff;} /* fundo da barra de rolagem, parte fixa */ ::-webkit-scrollbar-track-piece {background:#ffffff;} /* fundo da barra de rolagem, parte que ainda falta rolar */ ::-webkit-scrollbar-corner {background:#99cc00;} /* canto inferior direito da barra de rolagem */

Lembrando que é um código CSS, logo tem que ficar na folha de estilos de sua página, ou seja, entre as tags <style> e </style> ou entre as tags <b:skin> e </b:skin> se você usa Blogger.

No exemplo acima já coloquei algumas cores e o resultado vai ser uma barra de rolagem preta com fundo branco e pontas verdes, bem simples. Você pode vê-la na página: www.helenfernanda.com.br/2016/09/barra-de-rolagem-colorida.html.

Abaixo seguem exemplos mais incrementados.

◆ Barra de rolagem com imagem

Este é o código para uma barra de rolagem mais larga e com imagem:

::-webkit-scrollbar {background:#ffffff; width:30px; height:30px;} ::-webkit-scrollbar-thumb {background:orange url(https://lh3.googleusercontent.com/-AWEf6XhE9dU/WB0MjrDuFUI/AAAAAAAAlwg/ndXH3ZgHgDAxIAPDJtzASFHREV9dkoQkgCEw/s1600/triangulos.png) repeat;} ::-webkit-scrollbar-track {background:#ffffff;} ::-webkit-scrollbar-corner {background:orange url(https://lh3.googleusercontent.com/-AWEf6XhE9dU/WB0MjrDuFUI/AAAAAAAAlwg/ndXH3ZgHgDAxIAPDJtzASFHREV9dkoQkgCEw/s1600/triangulos.png) repeat;}

Quando uso width estou falando da largura da barra de rolagem vertical. Quando uso height me refiro à altura da barra de rolagem horizontal. Acredito que fica mais elegante quando as duas têm a mesma largura, mas você pode colocá-las em tamanhos diferentes.

Para usar em seu site, troque a URL da imagem por uma de sua preferência.

Veja o código em funcionamento na página de exemplo: www.helenfernanda.com.br/2016/09/barra-de-rolagem-com-imagem.html.

◆ Barra de rolagem com sombra

Criei também um exemplo com sombra. Segue o código:

::-webkit-scrollbar {background:#ffffff;width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:pink; box-shadow:0px 0px 10px deeppink inset;} ::-webkit-scrollbar-corner {background:pink; box-shadow:0px 0px 10px deeppink inset;} ::-webkit-scrollbar-track {background:#ffffff;}

Veja esta barra na página www.helenfernanda.com.br/2016/09/barra-de-rolagem-com-sombra.html.

Para saber como personalizar as sombras, visite o post CSS: sombras em caixas em imagens.

◆ Barra de rolagem com borda

Segue um código que usa borda: www.helenfernanda.com.br/2016/11/barra-de-rolagem-com-borda.html:

::-webkit-scrollbar {background:#ffffff; width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:lightyellow; border:2px dashed orange;} ::-webkit-scrollbar-corner {background:#ffffff;} ::-webkit-scrollbar-track {background:#ffffff;}

Para aprender os vários tipos de bordas, visite o post Aprendendo a usar bordas.

◆ Barra de rolagem que muda de cor

Neste exemplo a barra de rolagem muda de cor duas vezes: quando você passa o mouse sobre ela e quando clica na barra:

::-webkit-scrollbar {background:#ffffff; width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:purple;} ::-webkit-scrollbar-thumb:hover {background:#ffffff; border:2px solid purple;} ::-webkit-scrollbar-thumb:active {background:deeppink; border:0;} ::-webkit-scrollbar-corner {background:#ffffff;}

Veja em funcionamento na página www.helenfernanda.com.br/2016/11/barra-de-rolagem-que-muda-de-cor.html.

◆ Barra de rolagem listrada (sem imagem) que muda de cor

Esse código é um pouco mais complexo:

::-webkit-scrollbar {background:#ffffff; width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:repeating-linear-gradient(45deg, transparent, transparent 10px, #990099 10px, #990099 20px), linear-gradient(to bottom, #eeeeee, #999999);} ::-webkit-scrollbar-thumb:hover {background:repeating-linear-gradient(45deg, transparent, transparent 10px,#99cc00 10px,#99cc00 20px), linear-gradient(to bottom, #eeeeee, #999999);} ::-webkit-scrollbar-thumb:active {background:repeating-linear-gradient(45deg, transparent, transparent 10px,#0099cc 10px,#0099cc 20px), linear-gradient(to bottom, #eeeeee, #999999);} ::-webkit-scrollbar-corner {background:#ffffff;}

Veja esse bonito recurso funcionando na página www.helenfernanda.com.br/2016/11/barra-de-rolagem-listrada-que-muda-de-cor.html.

◆ Todos os exemplos:

◆ Mais algumas dicas:

Você pode agrupar vários atributos em uma mesma barra de rolagem, só terá mais trabalho para deixá-la agradável e combinando com o resto do site.

Neste post priorizei cor e tamanho. Para aprender a customizar ainda mais a barra de rolagem, visite o site CSS Tricks.

Caso procure boas imagens pattern, sugiro o site ColourLovers.com. A versão menor da imagem (para usar lado a lado em backgrounds) fica no link Preview.

Para escolher cores, visite os posts:

Se você estiver agora no Internet Explorer, no Google Chrome ou em outro navegador webkit, vai notar que a barra deste blog atualmente (24/06/2014) é #99cc00, que também é a cor do nosso favicon e de vários outros elementos do blog.

Até mais!

Posts relacionados