(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.
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!
Amei o tutorial mas...e a minha assinatura?
ResponderExcluir