Efeito Equipe


Olá pessoal *-* Me pediram pela ask o tutorial do Efeito do gadget Equipe aqui do blog e como eu sou muito legal com vocês, resolvi postá-lo hoje. (: Quem quer aprender?



~ Veja o Resultado ali na Sidebar. ~ 

Gostou? Então abra seu HTML e procure por
]]></b:skin>
Após achar a tag, cole acima dela o seguinte código:
figure { margin: 3px;
width: 125px; height: 125px;
overflow: hidden; position: relative;
border: 3px solid #98b7d9;
margin-right: 3px;
float: left;
}
figcaption {
 font-family: verdana;
font-size: 11px;
position: absolute;
display: block;
width: 130px; height: 20px; left: 310px;
bottom: 10px;
text-align: center; color: #fff; text-shadow: none;
background: url(http://i.imm.io/wDjd.png);
border: 3px solid #98b7d9; line-height: 20px; box-shadow: rgba(0,0,0,.5) 0 2px 8px;
-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transition-duration: 60s; -webkit-transition-duration: .60s;}figure:hover figcaption { left: 35px;bottom: 10px; }
 Pode parecer difícil de editar o código, mas é super simples, basta prestar atenção *-*

Bom, agora para aplicar basta criar um Gadget HTML/JavaScript e colar o seguinte código:
<a href="URL"><figure><img src="FOTO" width="125" alt=""/>
<figcaption>Nome</figcaption>
</figure></a>
<a href="URL"><figure><img src="FOTO" width="125" alt="" />
<figcaption>Nome</figcaption></figure></a>
<a href="URL"><figure><img src="FOTO" width="125" alt="" /><figcaption>Nome</figcaption></figure></a>
Como eu disse, parece difícil mas basta prestar atenção e você consegue ;)
Bom, eu aprendi lá no GU, não fui eu que o criei, por isso credite.

Espero que consigam. Beijos

10 comentários:

  1. Ai, eu amo este efeito, que bom que postou!! Fica muito lindo mesmo! Obrigada por postar linda! Beijos ♥

    Explodindo Glitter .blogspot.com

    ResponderExcluir
  2. Nossa, é super simples e tem um resultado lindo! ^-^ Vou usar, mas só no próximo lay de algum blog meu :D
    Bjos...

    - SammySacional -
    - Dando Uma de Escritora -

    ResponderExcluir
  3. Nossa, é muito lindo! Eu usaria se tivesse postadoras.

    omeubrilhantemundo.tk

    ResponderExcluir
  4. Fica realmente lindo, concerteza irei usar.
    Adolescentes do oposto (blog no perfil)

    ResponderExcluir
  5. Olá querida,
    esse efeito fica maravilhoso,
    pena que pra mim não deu certo :/
    Deve ser por causa do tamanho das imagens,
    sei lá...
    Beijooos;
    semprecomvoce2012.blogspot.com

    ResponderExcluir
  6. Amei o efeito, sempre quis saber como conseguiu fazer :3 achei perfeito.

    garota-adolescente.tk/
    Beijos. Ótimo post.

    ResponderExcluir
  7. Fica lindo! Quem sabe eu use no próx. Lay! :3
    Malikisses xx

    Meu Jardim Secreto

    ResponderExcluir
  8. Eu vou usar no próximo lay, eu tava doidinha para aprender ,rss

    Cliquesnocapricho.blogspot.com

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +