Scrollbar com Efeitos ao Clicar e Hover


Oie...já postei para vocês algumas formas para personalizar a barra de rolagem do blog (scrollbar) - se ainda não viu nenhuma, clica aqui, aqui, aqui e aqui. Bom, hoje trouxe outra forma, sendo que dessa vez nós vamos fazer com que a scrollbar mude de cor ou de imagem quando você clicar nela e quando o mouse passar sobre ela. É bem simples! Veja como fica no template free Chibi Kawaii.

Para isso, use os códigos abaixo antes de /b:skin:
(Esse é para usar cores)
::-webkit-scrollbar {
width:15px;/**largura**/
height:auto;
background:#fff;/**cor de fundo**/
height:5px;/**altura**/
}
::-webkit-scrollbar-thumb{
background: #f1f9fc;/**Cor da barra**/
height:5px;/**altura**/
}
::-webkit-scrollbar-thumb:hover{
background: #D9F1FA;/**Cor da barra ao passar o mouse**/
}
::-webkit-scrollbar-thumb:active{
background: #D7FFF6;/**Cor da barra ao pressionar**/
}

(Esse é para usar com imagens)
::-webkit-scrollbar {
width:15px;/**largura**/
height:auto;
background:url('URL-DA-IMAGEM-DE-PLANO-DE-FUNDO');
height:5px;/**altura**/
}
::-webkit-scrollbar-thumb{
background: url('URL-DA-IMAGEM-DA-SCROLLBAR');
height:5px;/**altura**/
}
::-webkit-scrollbar-thumb:hover{
background: url('URL-DA-IMAGEM-DA-SCROLLBAR-AO-PASSAR-O-MOUSE');
}
::-webkit-scrollbar-thumb:active{
background: url('URL-DA-IMAGEM-DA-SCROLLBAR-AO-PRESSIONAR');
}

Espero que gostem! 

8 Comments

  1. Unknown21 novembro

    Não entendo HTML ;-; mas bem, gostaria de saber onde você acha imagens tão fofinhas pra blogs :3 Se puder responder agradeço. *3*

    ResponderExcluir
  2. Unknown25 novembro

    Oii. Bom, eu queria a sua ajuda. Bom, eu tentei colocar uma faixinha no meu post do blog, só que deu tudo errado e quando eu visualizei estava escrito na faixinha " undefine" o que eu faço?? Por favor preciso de sua ajuda!
    veja: http://chiclete-funny.blogspot.com.br/

    ResponderExcluir
  3. Unknown26 novembro

    Data!!

    ResponderExcluir
    Respostas
    1. Roberta26 novembro

      Então o problema deve estar no HTML ou configuração da data; tenta colocar assim, mudando o background pela URL da faixinha.

      Excluir
  4. Line21 abril

    Amo blogs como o seu, uma pena a maioria dos qu stão linkados estarem fora do ar :(

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up