8 de fev de 2013

TUTORIAL : Efeito Nebulla


ooooi, como vocês estão ? 
Primeiro eu queria pedir desculpas por não ter postado ontem, deixei para a ultima hora e no fim...não deu.Segunda é que hoje vou trazer duas postagens para compensar a de ontem haha' .

Hoje trouxe um efeito que eu simplesmente >amo<. Dá para usa-lo em efeito para autores ou até em afiliados . O nome dele é Nebulla confira ele aqui .
Vamos para o efeito:

1. Primeiro procure por ]]><\b:skin> e acima dessa tag cole o seguindte :

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 vermelho . RECOMENDO que a largura e a altura seja ambas 108px, pois se você mudar precisara mudar o left e o botton da faixa. Após editar tudo, salve.

2. Em um gadget de HTML\JavaScript, cole:

<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. Alguma dúvida, tirem pelo comentário.
Créditos : <3
Bom gente, depois trago mais post. #Beijo
> Helo





Um comentário:

  1. Que legal. Adorei pq alem do efeito pode se colocar um link ^^

    garotoimoral.blogspot.com

    ResponderExcluir