27/01/2013

Obrigada + Efeito Nebulla

Hii Marshmallow com chocolate *--*
Antes de mais consegui alcançar a minha meta, Obrigada ás 60 marshmallows, que me aturam, sei que não é  uma tarefa fácil! Desculpem não publicar nada a muito tempo, mas tenho tido problemas técnicos... E estou sem o photoshop. Logo não posso alterar o layout. E fazer lá grandes imagens para os post's. Então vamos ao que interessa. Um tutorial bem simples! Efeito Nebulla. Aquele efeito que aparece o nome, ao passar o rato pela imagem. Créditos para o Kawaii World ok?
1. Abre o html e procura por ]]></b:skin> e acima dessa tag, cola:

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

Neste código existe muita coisa a ser editada, mas as destacadas são apenas os mais importantes. Recomendo que a largura e altura sejam ambas 108px, pois se você mudar, vai ter que trocar o left e bottom da faixa. Após editar tudo que está em sublinhado, salve.

2. Abre um gadget de HTML/Java e cola:

<a href="Seu link"><figure><img src="Linkdafoto" width="Larguradafoto" alt=""/>
<figcaption>Nome</figcaption>
</figure></a>

Salve e estará pronto...

4 comentários:

  1. Parabéns por tudo e pela sua meta conquistada que venha 2013 \o/ rsrsrs'
    Também gostei do efeito =P
    Vim trazer-telhe (nome inventado por mim) um aviso... é o seguinte tenho uma tag esperando por você lá no blog ^^
    Esperando sua nobre visita, já que já dei o aviso irei me retirar-me (invenção??) kisses kisses...

    teenagedreamoff.blogspot.com

    ResponderEliminar
    Respostas
    1. Obrigada pela tag vou já vê-la *-*
      Owii espero mesmo conseguir alcançar novas metas!
      kiss

      Eliminar
  2. Adorei o blog.Muito fofo <3
    Já estou seguindo linda >.<

    ResponderEliminar