8 de jan. de 2013

Efeito Caption


Só eu que acho um bilhão de vezes mais legal, usar algo que você mesma tenha criado? Não tem nada a ver com o post -masok.
Trouxe um tutorial muito lindo, que aprendi no Kawaii World. O efeito é assim, quando você passa o mouse sobre um foto, aparece um legenda muito fofa. Fica maravilhoso na elite de afiliados. Veja Preview aqui.


1. Vá no seu HTML e procure por  ]]></b:skin>. Acima da tag, cole:
@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/qbzesex/2tSm7y7gy/04b_03_.ttf'); format("truetype");}
imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 2px 2px 0;}
captioon {position: absolute; background: #000; color: #fff; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 8px; font-family: "04b03", small-fonts; text-shadow: 1px 1px 3px #000;}
imagem:hover captioon {opacity: 0.75;}
imagem:hover:before {opacity: 0;}
.caption:before {bottom: 10px; right: 10px;}
.caption captioon {bottom: 3px; right: 30%;}
.caption:hover captioon {right: 0px;}
O 2 é o tamanho do espaço entre um imagem e outra. O 000, é a cor do fundo da legenda. O fff, representa a cor da fonte. Altere e salve.

2. Crie um gadget HTML/Javascript e nele, cole:
<imagem class="caption"><img src="LINK DA IMAGEM" /><captioon>Legenda Aqui</captioon></imagem>

Altere o que está em negrito.
Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

5 comentários:

  1. Que legal esse efeito, acho que vou pôr ele em algum layout do blog...bem legal né?
    Seu blog é...........MARAVILHOSO!!AMEI.

    bjookas♥
    http://blogmandyka.blogspot.com.br/

    ResponderExcluir
  2. Nunca tinha visto o efeito, bem legal ^^

    Tomei a liberdade e coloquei um preview no blog de testes, espero que não se importe ^^

    ResponderExcluir
    Respostas
    1. É muito fofo mesmo!
      Obrigado! Eu já ia pedir, pra você por o preview!

      Excluir
  3. Adoreiii *---* No meu blog só acrescentei alguns códigos coloquei nos meus afiliados ;3

    crazy-landia.blogspot.com.br

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!