25 de nov de 2012

Tutorial: efeito queen

Muito boa tarde, leitores.

Meu Deus, nenhum domingo muda! Sempre ficamos com preguiça em pleno domingo :S E além de tudo, tenho prova amanhã, preciso recuperar as forças, KKKK' Enfim, faz tempinho que eu e as meninas não trazíamos um tutorial aqui, néah?

Então aproveitei e trouxe um efeito bem legal, que pode ser usado em vários gadgets, o mais comum é o de autores(as). O nome dele é queen, 'efeito queen'.. Ele é muito interessante, e a dona dele é a linda Kaorii >.< Clique aqui para ver o preview. Espero que gostem ;)



1. Vá no seu HTML, e procure pela tag ]]></b:skin>. Assim que achar, cole ACIMA dela:

.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);}

Tá tudo explicadinho no código, ou seja, você vai mudar apenas as partes em negrito

2. Em um gadget HTML/JavaScript, cole o seguinte código, e de novo, vá mudando as partes em negrito:

<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>
Gostaram do efeito? Espero que sim, eu achei lindo *-* Dúvidas? É só falar comigo ;)

Besos ♥  

9 comentários:

P.C. disse...

Adoro esse efeito, o resultado é mesmo lindo! *3*
Beijocas!

PiinkCookie.blogspot.com

Megan disse...

que blog lindo!!! um layout perfeito de natal,, amei o tuto

Juuh Feer SZ disse...

OMG, thaanks, flower >.< Bom que gostou ;)

- Yenny-Chan 사랑 disse...

Lindo efeito!

Acho que ao invés de falar que quem fez foi a Kaorii, deveria colocar KAWAII WORLD, linkado.

Feliz Natal | Bezzos | http://blog-pinkberry-oficial.blogspot.com/

Juuh Feer SZ disse...

Muito obrigada, PC >.< É lindo mesmo o efeito *-*

Lindo, né? Oks, na próxima vez eu coloco então.. =/

Dayane disse...

Adorei o tuto ♥
o efeito é lindo >.<
bjinhos
conversando-com-a-lua.blogspot.com.br

Ingrid disse...

Muito legal esse efeito, fica bem bonito

Juuh Feer SZ disse...

Fica lindo mesmo, né? >.<
,

Juuh Feer SZ disse...

Bom que gostou, Dayne >.< O efeito é lindo mesmo, né?