12/12/2014

04. Maratona CSS: Barra de Rolagem com imagem

||

Olá bunnies, peço desculpas por ainda não ter respondido os comentários e nem ter retribuído as visitas, essa semana anda bem corrida e pouco dormida. Quem foi ver o filme do Hobbit? Bom eu fui ver O Hobbit a batalha dos cinco exércitos yeeee!!! Não podia perder, amos as historias de Tolkien. O filme foi perfeito, a trilha sonora então, os efeitos então uxiii. *0* O que me irritou mesmo foi o carinha da bilheteria que não queria deixar eu entrar, mesmo já tendo o bilhete ele achava que eu tinha menos de 14 anos e não podia entrar sozinha, mesmo eu mostrando minha inidentidade... ele nem olho, sendo que é indicativo do filme é 12 anos, então fui me queixar. Pedirão desculpas e falaram que era funcionário novo, e todo mundo me conhece lá, pois sempre passo no cinema e na livraria.

Como pedido de desculpas ganhei um lancinho grátis economizei 25 reais. Poderiam fazer isso mais vezes rs outra coisa que me deparei lá foi três anões lá vestidos de anões rsrs, cute.

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:
::-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