13/01/2013

Tutorial: Efeito Queen

||

Boa noite pessoal, desculpe a demora para postar, me distrai vendo anime de novo rsrs Mas trago um rápido tutorial de efeito, ele se chama Queen. O efeito dele e bem simples, a imagem aparece com uma bordinha e ao passar o mouse um fundo branco com opacidade vai  aparece, revelando o texto. Os créditos são do KW. Então chega de blá, blá, blá e vamos lá.

Primeiramente vá até seu HTML, então procure por ]]></b:skin>. Acima da tag, cole esse código:
.queen a, .queen a img {display: inline-block;}
.queen a {width: LARGURADAIMAGEMpx; height: ALTURADAIMAGEMpx; position: relative; padding: 3px; background: #CORDABORDA; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px 3px 3px 3px;}
.queen a span {position: absolute; width: 110px; height: 110px; top: 3px; left: 3px; text-align: center; font: 8px handy; text-transform: uppercase; line-height: 110px; text-color: #CORDOTEXTO; text-shadow: 0px 1px 1px rgba(255,255,255,0.6); font-size: 8px; opacity: 0; filter: alpha(opacity=0); background: rgba(255,255,255,0.8); transition-duration: 2s; -webkit-transition-duration: 1s; -moz-transition-duration: 2s;}
.queen a:hover span{opacity: 1; filter: alpha(opacity=99);}

Arrume as partes em negrito como se pede, e então salve. Agora vá ate seu layout e abra um gadget de HTML/JavaScript, então cole:

<div class="queen">
<a href="SEULINK.COM"><img src="URL DA IMAGEM" />
<span>SEU TEXTO</span></a>
<a href="SEULINK.COM"><img src="URL DA IMAGEM" />
<span>SEU TEXTO</span></a>
</div>

Novamente, arrume como se pede nas partes em negrito, e então salve. Para adicionar mais é só repetir do "<a href" até a "</a>".

7 comentários:

  1. Ain amei !!!

    cantinho-da-modaa.blogspot.com

    ResponderExcluir
  2. Tenho um selinho para você lá no meu blog ;)http://juventudedamoda-br.blogspot.com.br/2013/01/selinho-3.html

    ResponderExcluir
    Respostas
    1. Yo Fer obrigada, ate mais tarde retribuirei

      Excluir
  3. Já usei ese efeito , mais o Zooming é melhor !
    Amei , seu blog , seguindo á muito tempo ! Amei aquele tuto de fazer o Template!

    Aceita afiliação ?
    '3' > http://semprefuiestranha.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Concordo com você, fico contente que tenha gostado e espero que ajude.
      Claro aceito sim, desculpe a demora para responder

      Excluir
  4. Usei esse efeito, é bem divo.
    Adorei seu blog! Estou seguindo, se puder retribuir ficaria muito feliz ;)
    Kiss <3

    http://mundomaniateen.blogspot.com.br/

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram