23 janeiro 2012

Barra de rolagem personalizada

Errata: Tutorial por Sweet Poison. Créditos TOTAIS ao Sweet Poison. Desculpe :/

ain *-*

Hey, meus marshmallows coloridos (coisinha fófis), trouxe hoje um tutorial (aleluuuuia)de como deixar a barra de rolagem arredondada e colorida, com fundo diferente e a própria barra também !
Então vamos lá ?
Read moreeeeeeeeeeeeeeee o/
Olha a diferença:




Perceberam ? A personalizada é muito mais bonita né ?
Então ... Querem uma assim, ou até mais bonita ? Então vamos ao tutorial e chega de falação ! 
Tutorial :
Vá no design  Editar html  e procure por :

]]></b:skin>
E logo abaixo cole:

::-webkit-scrollbar-thumb:vertical {
background: url(LINK-DA-IMAGEM1) repeat; /* Background da barra móvel (Vertical) */
height:50px;
border: 2px solid #8A2BE2; /* Cor da borda */
box-shadow: 2px 2px 4px #bebdbd;
-moz-box-shadow: 2px 2px 4px #bebdbd; /* Sombra */
-webkit-box-shadow: 2px 2px 4px #bebdbd;
-khtml-box-shadow: 2px 2px 4px #bebdbd;
-moz-border-radius: 10px; /* Bordas arredondadas */
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:horizontal {
background: url(LINK-DA-IMAGEM2) repeat;  /* Background da barra móvel (Horizontal */
height:50px;
border: 2px solid #8A2BE2; /* Cor da borda */
-webkit-box-shadow:0 0 1em #eee; } /* Sombra */


::-webkit-scrollbar {
height:20px; width:20px;
background: url(LINK-DA-IMAGEM3) repeat; /* Background das barras fixas */
box-shadow: -3px -2px 10px #bebdbd; /* Sombra */
-moz-box-shadow: -3px -2px 10px #bebdbd;
-webkit-box-shadow: -3px -2px 10px #bebdbd;
-khtml-box-shadow: -3px -2px 10px #bebdbd;
-moz-border-radius: 10px;  /* Bordas arredondadas */
-webkit-border-radius: 10px;
border-radius: 10px;
}

Agora edite conforme o que diz abaixo :


LINK-DA-IMAGEM1 -- É o link da imagem de ''fundo'' da barra de rolagem.
LINK-DA-IMAGEM2 -- É o link da imagem de fundo da barra de rolagem de baixo.Como essa:



LINK-DA-IMAGEM3 -- É o link da imagem da barra de rolagem em si. A que se move e que você arrasta com o mouse. (ava)

Então é isso amorecos :)
Sabia que eu amo essa gente que lê o blog  ?




Um comentário:

Bruna disse...

Awn, adoro a barra de rolagem personalizada, mas eu uso a normal, fiz esse tutorial esses dias no meu blog ♥
Seguinnnnndo aqui *-*
Sempre que puder venho comentar aqui <3
Ótima terça p/vc :)
Ahh, segue dvlt?

Bjs,
bnascimentooo.blogspot.com