domingo, 2 de setembro de 2012

[Tutorial] Barra de rolagem decorada



Hey pessoas!
Agora voltei com o
meu 1° Tutorial de Html!
É sobre a Barra de Rolagem.

Vamos lá?

Clique no Leia Mais para continuar!







Tutorial ~

Com sua conta do blogger aberta, vá em "Design" -> "Editar HTML".

Procure por Body { *Ele fica na parte de cima do HTML*

Abaixo dele copie e cole este código:


background: #FFFFFF ;
}
::-webkit-scrollbar {width: 10px; height: 20px;}

::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display:none;}

::-webkit-scrollbar-track-piece{background:#bdcdd5;-webkit-border-radius: 0px;}

::-webkit-scrollbar-thumb:vertical{background:#dbe4e8;-webkit-border-radius: 0px;}

::-webkit-scrollbar-thumb:horizontal{background-color:#;-webkit-border-radius: 0px;}

body {

Para Modificar a cor do fundo da barra
modifique este código:

::-webkit-scrollbar-track-piece{background:#bdcdd5;-webkit-border-radius: 0px;}

ao invés de bdcdd5 coloque o codigo da cor
que você quer para o fundo.

Agora para modificar a cor da barra que se movimenta
modifique este codigo:

::-webkit-scrollbar-thumb:vertical{background:#dbe4e8;-webkit-border-radius: 0px;}

O mesmo processo. coloque o código da cor que deseja no lugar de dbe4e8

Se quiser por ao invés do codigo uma imagem é só substituir

background:#dbe4e8;

por background-image: url (URL-DA-IMAGEM-);

Fácil não? Qualquer duvida deixe seu comentário ^^


Tutorial feito Por Mim
Plágio eu Não Aceito!
Não deixem de comentar /!\




Nenhum comentário:

Postar um comentário