2 de fev. de 2012

Barra de rolagem colorida

Beautiful-bow-cute-fashion-girl-favim.com-284667_large
Como vão? Eu vou bem, obrigada. Sabem a barra de rolagem aqui do DMN? Aquela redondinha? Pois é, querem aprender? Clique em leia mais.

(Tabela de cores aqui)

Vá no HTML do seu blog, aperte CTRL+F e procure por ]]></b:skin> .


Acima da tag encontrada cole o seguinte código:
::-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;}
Alterações: 


Onde esta em vermelho  é a cor da barra de rolagem
Onde esta em azul é a cor da borda da barra de rolagem
Onde esta em rosa é a URL da imagem de fundo da barra de rolagem


OBS: Se você quiser colocar uma cor em vez de uma URL de fundo basta onde esta em parênteses colocar o código da cor. 


É isso, beijinhos.

3 comentários: