12/12/2014

Barra de Rolagem com imagem


O tutorial de hoje é bem simples é fácil. Ensinarei como personalizar a barra de rolagem com imagens. Na verdade é mais do que fácil por apenas uma imagem, mas a graça é o tipo de imagem. Se deixa-lo com algumas bordas em pixel ou pedaços falhados, faz um efeito bem legal. Os códigos já estão com toda explicação, mas aconselho não colocar cores apenas imagens. Pois se usar uma imagem com transparência a cor vai aparecer...

As cores são clarinhas mas dá para ter uma ideia é só clicar aqui: Preview 

1. Vá até a pagina Modelo>> Editar HTML e procure por ]]></b:skin> e acima cole:

Códigos
::-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.


                              

Todos tem dimensões de 17x467 menos o primeiro que tem 13x367. Para quem quiser alterar as cores deixei dois modelinhos em PSD para baixar: Download | Link Direto

12 comentários:

  1. Fica uma fofura isso, né? Eu sempre quis saber como fazia!
    www.dai-sies.blogspot.com

    ResponderExcluir
    Respostas
    1. Verdade, fica sim. Ah, que bom que postei então. *3*

      Excluir
  2. Ainda não assisti O Hobbit, mas já está nos meus planos *u*
    Que efeito bonitinho que fica! Com certeza fica mais legal do que personalizar só com HTML. Adorei ♥

    Até mais! ♡ || miki candy。

    ResponderExcluir
    Respostas
    1. Tomara que goste. :3
      Verdade, também acho que fica mais bonitinho do que só com HTML.

      Excluir
  3. Nossa, nunca me confundiram assim numa bilheteria ahsuhs', as pessoas acham que sou mais velha do que realmente sou ¬¬
    Gente, essa barrinha é um amor! Muito linda mesmo. Vou usar ♥
    Cat In My Coffee

    ResponderExcluir
    Respostas
    1. Sortuda porque comigo é ao contrario t.t
      Usa sim :3

      Excluir
  4. eu sou doida pra ver esse filme, parece ser muito legal!, Wendy amei o tutorial *---* vc arrasa como sempre!

    - Queria avisar que nosso blog ''Kawaii Things'' retornou do hiatus, queria avisar que voce continua em nossa afiliação, por favor confirme sua afiliacão no blog, obrigada...

    http://kawaii-t.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu gostei, achei bem legal. Ain obrigada.

      JURA??? EBAAAAA. Claro que aceito sim, o KT sempre foi e será meu afiliado e blog irmão.

      Excluir
  5. Eu estava louca louca esperando esse tuto, se eu não me engano eu fui uma das que pediu pois naquele seu layout vermelho tava muito dahora U.U Eu acho que você já leu que a sua imagem ainda não da pra ser utilizada na pagina de blogs parceiros, mas to avisando de novo caso não tenha visto, só to com medo de apanhar por ficar enchendo seu saco e.e Se você quiser saber como é basta dar uma olhadinha na pagina de blogs parceiros

    http://heartcoffee1.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Foi sim rsrs ^^
      aquele ficou bem legal mesmo, foi o primeiro layout que fiz que achei bonito kkk
      Entendo, tomarei providencias então e lhe enviar outra ^^

      Excluir
  6. Bunny, no meu blog não deu certo T-T
    Ele mostra o cod acima da nav bar ao invés de deixar a barra de rolagem com a imagem D:
    Halph! T-T
    Parabéns pelo Blog :3

    ResponderExcluir
    Respostas
    1. Que estranho... ele deve estar dando conflito com algum outro código. Será que é possível deixar o link para mim dar uma olhadinha? Como um teste secundário tente adicionar o código em um layout sem modificações. Mas deixe o link para eu pode analisar, está bem? ^.-

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345