15 de maio de 2014

Efeito Nebulla

 Trouxe um efeito que acho lindo. Você pode colocá-lo tanto  nos autores quanto
nos afiliados do blog.


Para colocar o efeito em seu blog, pegue o código abaixo e coloque acima da tag ]]><\b:skin>

figure { margin: 3px; width: LARGURApx; height: ALTURApx; overflow: hidden; position: relative; border: 3px solid #CORDABORDA; margin-right: 3px; float: left;}figcaption { font-family: verdana; font-size: 11px; position: absolute; display: block; width: 111px; height: 20px; left: 267px; bottom: 6px; text-align: center; color: #CORDAFONTE; text-shadow: none; background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/78-1.png); border: 3px solid #CORDABORDADAFAIXA; 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;}

Edite oque está em preto. RECOMENDO que a largura e a altura sejam ambas 108px, pois se você mudar precisara mudar o left e o botton da faixa. Após editar tudo, salve.

Para fazer o efeito funcionar pegue o código abaixo e coloque no gadget HTML/JAVA SCRIPT

<a href="SEULINK"><figure><img src="LINKDAFOTO" width="LARGURADAFOTO" alt=""/><figcaption>NOME</figcaption></figure></a>

Edite, e em largura e altura coloque os mesmo do código anterior.
Salve e estará pronto. 

Kissus

Nenhum comentário:

Postar um comentário

- Este espaço é todo seu. Tire suas dúvidas!

- Por favor, Não faça algum request pelos comentários,
para isso serve a Ask.

- Se não gostou de algo, não use palavras baixas. Ninguém precisa se rebaixar tanto para expressar uma opinião.

- Leio todos os comentários e retribuo todos.

-Thanks