14/01/2015

Tutorial - Barra de Rolagem com Imagem

(postagem programada)
Hello Little Stars!
Para tirar diferenciar hoje trouxe um tutorial bem legal que é para personalizar a barra de rolagem e ao invês de cores com imagem,bem legal!Vamos ver?

O Tuto é simples e se você quer ter uma ideia de como vai ficar clique aqui,muito cute não acham?
Vamos ver o Tuto?

1.Vá até a página Modelo>>Editar HTML Ctrl+f e procure por ]]></b:skin> e acima coloque:
::-webkit-scrollbar{
width: 13px; /*largura da barra vertical*/
height: 5px; /*largura da barra horizontal*/
}
::-webkit-scrollbar-track-piece{
background: #cor url("url da imagem de fundo") repeat;  /*leito da barra*/
}
::-webkit-scrollbar-thumb:vertical{
background: #cor url("url da imagem da barra que se move") repeat; /*barra que se move*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal{
background: #cor url("url da imagem da barra que se move") repeat; /*barra que se move*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Entendendo o código: Já coloquei toda explicação no código, mas a parte mais importante de arrumar esse código é a imagem. É aconselhável deixar a largura dela exatamente como a da barra. Exemplo sua barra terá 17px de largura então as imagens devem ficar entre  16px ou 17px.
                              

Espero que tenham gostado do tutorial ^^
Amanhã ilustrações da Spectra e Cupcakes!

Um comentário:

Vai Comentar,Estou feliz mas Sigas Essas Regras ♥
1-Não falar Palavrões ou Linguagem Inapropriada
2-Só aceito "seguindo segue de volta" se falar sobre o post
3-Comente sobre o post
Caso não respeitar qualquer regra seu comentario será apagado,beijinhos♥

© Sweet Cupcake - 2015. Todos os direitos reservados.
Criado por: Isy Hatter.
Tecnologia do Blogger.
imagem-logo