24.12.12

Tutorial - Efeito Description + Obrigada!!

Yoo~
Em primeiro lugar,quero dizer obrigada por todos os seguidores,e por estarmos quase completando outra meta(de 25 seguidores).
Como estou em espírito natalício e mal posso esperar pela ceia de Natal ajudem o HTML Master à ter 25 seguidores!!!


Agora,o tutorial é de um efeito muito bonito,que aconselho a usar em um gadget para autores  divulgações...Temos aqui o live preview!!
Vamos lá?
1.Vá em Editar HTML,aperte Ctrl+f  e procure por </head>.Depois de encontrar a tag,cole acima:


<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>
2.Desta vez procure por ]]></b:skin> e cole acima:

/** EFEITO DESCRIPTION **/
.description {
float: left;
 height: 110px;------*\ Altura da sua imagem /*-------
 margin: 0 9px 9px 0;
 overflow: hidden;
 position: relative;
 width: 110px;-------*\ Largura da sua imagem /*-------
display: inline;
 position: relative;
}
.description img {
height: auto;
position: relative; 
width: auto; transition-duration: 5s;
}
.description span {-------*\ Lugar do seu nome /*-------
display: none;
 font-family: 'Yanone Kaffeesatz', sans-serif;-------*\ Fonte /*-------
 font-size: 21px;-------*\ Tamanho da fonte /*-------
 height:100%;
 padding-top: 20px; 
position: absolute;
 text-align: center;
 text-decoration: none;
 width:100%;
 z-index: 100;
 text-transform: uppercase;
}
.description span em {-------*\ Lugar do seu blog /*------- 
font-style: normal; 
display: block;
 font-family: 'Yanone Kaffeesatz', sans-serif;-------*\ Fonte /*-------
 font-size: 14px; -------*\ Tamanho da fonte /*-------
text-align: center;
}
.fundo {
background-color: #000;-------*\ Cor do fundo /*-------
 color: #fff;-------*\ Cor das fontes /*-------
 filter: alpha(opacity=80);
 moz-opacity:.8;
 opacity:.8 ;
}
3.Agora num gadget HTML/Javascript cole isto:
Código aqui 
E já tá!!
Espero que gostem :) 


6 comentários:

  1. 3o seguidores *u*. Achei lindissimo seu blog. Visita o meu #My Wonderland

    ResponderEliminar
  2. Que lindo esse efeito! To fazendo um novo layout pro meu blog, vou usar e creditar :)

    www.blogmagiateen.net

    ResponderEliminar
    Respostas
    1. É mesmo!!
      Sério??Me avisa quando acabar para eu ver,tou muito curiosa!!!

      Eliminar
  3. Parabéns pela meta. Já tinha visto esse tuto antes no HTMLuv (.tumblr.com) e amei!
    Beijos!
    blogthistime.blogspot.com

    ResponderEliminar
  4. Eu amei esse tutorial! Com certeza vou usar nos destaques do meu novo layout! Obrigada *--*
    Já estou seguindo aqui <3
    Beijos~

    myacidblackcherry.blogspot.com

    ResponderEliminar

✖ - Não insulte - senão seu comentários irá ser removido
✖ - Comente sempre que puder!!Ficamos sempre feliz quando comentam :)
✖ - Se está querendo comentar mas tem preguiça, faz esforcinho xD

Atentamente,

O time.