Barra de rolagem colorida e arredondada

Reações: 


Oi meus cupcakes,trouxe hoje um tutorial de como por aquela barra colorida no blog!esse é o jeito arredondado!espero que gostem!
Primeiro vá em Design 
 Editar Html 
Clique em Ctrl + F (caixinha de busca)
e procure por ]]></b:skin>
coloque antes de ]]></b:skin> o código abaixo:
::-webkit-scrollbar-thumb:vertical {
background: #e7b3c2;
height:50px;
border: 2px solid #fff;

box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd;
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #bebdbd;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f26d92; height:10px;
border: 1px dashed #fff;
-webkit-box-shadow:0 0 1em #eee; }
::-webkit-scrollbar {height:10px; width:20px; background: url(fundo da barra de rolagem) repeat;

box-shadow: -3px -2px 10px #bebdbd;
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;}
Onde está  (#e7b3c2) é onde você deve colocar o código da cor da barra, onde na imagem está preto.
Onde está (#fff) é onde você deve colocar o código da cor da borda, onde na imagem está azul.
Onde está  (fundo da barra de rolagem) você deve colocar a url da imagem que você quer usar como plano de fundo, onde na imagem está cinza com tracinhos roxos. Mas se você quiser colocar só uma cor e não uma imagem apague url(fundo da barra de rolagem) e coloque o código da cor desejada. 


Créditos: Meia Noite e quinze 
                Todas as Pequenas Coisas

0 comentários:

Postar um comentário

comente para deixar o mundo mais feliz!
não esqueça do seu URL do blog!

veja também: