25 de fev. de 2013

Arrow Wishlist

| |
Achei tão bonito esse efeito que eu fiz *-*
Yo minna! Como minhas aulas já vão começar, vou ter pouco tempo pra postar. 
Então vou ficar em semi-hiatus irei postar sim, mas poucas vezes por semana ^^
Hoje eu trouxe um tutorial de wishlist que eu vi lá no Designs for You então se for usar, credite ao NNS e ao DFY, por favor u_u
Preview
Procure a tag }]]></b:skin> e cole isto antes dela:
/** ARROW WISHLIST **/ .wishlist1 {color: #fff; background: #1c1c1c url('http://static.tumblr.com/gy4zz8m/0Zvma1y0y/seta.png') no-repeat; font-family: verdana; font-size: 9px; line-height: 9px; padding: 5px; padding-left: 20px; margin-top: 1px; margin-bottom: 2px; text-align: left; -webkit-box-shadow: inset -2px -2px 3px #e8e8e8; box-shadow: inset -2px -2px 3px #141414; -moz-box-shadow: inset -2px -2px 3px #e8e8e8; transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s;} .wishlist1:hover {color: #fff; padding-left: 30px; transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; -o-transition-duration: .5s;}
Entendendo o código: #1c1c1c é o background, se não gostar mude para uma que lhe agrade.
#141414 é a sombra interna, coloque da mesma cor do background, mas um pouco mais escura.
#e8e8e8 é a sombra externa, ela já está agradável assim, então não precisa mudar se não quiser.

Depois, crie um Gadget HTML/Javascript e cole isso nele:
<div class="wishlist1">Coloque aqui o que você quiser.</div>
<div class="wishlist1">Metas</div>
<div class="wishlist1">Etc</div>
<div class="wishlist1">Etc</div>
<div class="wishlist1">Etc rs</div>
Espero que tenham gostado e não se esqueçam de creditar, por favor! 

6 comentários:

  1. Adorei esse tutorial ^^ A wishlist
    fica bem bonitinha.
    Gostei!

    Beijos

    VISITA >> http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
  2. Ai que lindo *--* Estou pensando em usar, se usar eu credito :3(queria saber se o blog de vocês aceitam tag's?)

    Universode-umotaku.blogspot.com

    ResponderExcluir
    Respostas
    1. use sim *---*
      aceito, mas eu tenho preguicinha de responder T.T

      Excluir

- Não xingue ninguém, pois toda ação tem uma reação.
- Não julgue a opinião dos leitores. Se fizessem isso com você, você não gostaria, certo?
- Não peça pra seguir de volta ou visitar seu blog. É deselegante.
- Não xingue meu blog. Ele é feito com muito esforço, e não gosto de ninguém "pisando" nele :)