Tutorial: Efeito Queen.


Deu trabalho editar camada por camada...
Hey! Yoo~

Como ainda não sei oque postar, sobre a maratona, trouxe o efeito que uso no gadget "Team". Eu acho ele l-i-n-d-o e super simples. E o melhor, ele é facinho de fazer e de modificar. Aprendi lá no Kawaii World, então é bem obvio que os créditos são de lá. Ele é muito bonito, também, para usar na elite de afiliados, como fez a "Tia Bee" - do Revenge. Para visualizar o efeito, clique aqui.
Então, vamos ao tutorial?

Para começar: Abra teu HTML - dê F3 ou Ctrl + F e procure por: ]]
Acima dessa tag cole o seguinte 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);}

Modifique as partes em negrito, ao seu gosto. Depois salve.
Agora vá em Layout - Adicionar Gadget - HTML/ Javascript e cole esse código nele:


<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, modifique as partes em negrito e salve.
Se quiser imagens: 100*100 - 01 02 03 04 05 06
110*110 - 01 02 03
120*120* - 01 02 03 04
Todos os links são ou do TSD ou do Beijo XOXO.

9 comentários: