• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

15 de novembro de 2012

Separando o Título dos gadgets em hover

 
créditos
Hooý laranjas verdes, hoje trouxe um tutorial mega fácil e que no final fica super lindo, quem nunca viu um blog com os títulos dos gadgets se separando quando colocamos o mouse em cima? super fofo né?! hoje iremos aprender como fazer isso.
Primeiramente você deve fazer o seguinte com seu título de gadget.

                       Arrume seu código, do jeito que quiser, e vai ficar por exemplo, assim:


.sidebar h2 {

font-family: Sofia;

color:#000000; 

background:#D3D3D3; 

font-size: 18px; 

text-align: center; 

border-bottom: 1px solid #000000;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Agora, antes de onde está em negrito você coloca:
-webkit-transition-duration: .40s;

E agora, você coloca:


.sidebar h2:hover {letter-spacing: 3px;}

Bem fácil né?! aí seu código irá ficar assim:


.sidebar h2 {font-family: Sofia;color:#000000; background:#D3D3D3; font-size: 18px; text-align: center; border-bottom: 1px solid #000000;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}.sidebar h2:hover {letter-spacing: 3px;-webkit-transition-duration: .40s;}

Espero que tenham entendido.
bjoon

não esqueçam de participar do joguinho que está havendo no blog clicando aqui


3 comentários:

  1. Amei o tutoo >.< Super legal, quando fizer outro lay vou usar u-u

    http://potedemagianaweb.blogspot.com.br/

    ResponderExcluir
  2. Não entendi,arrume este post porfavor faz mais explicado PUIFAAAAAAAA <3

    ResponderExcluir
    Respostas
    1. Amo vocês fiquem com Deus agora eu entendi obr pelo código creditei, e falei para minhas amigas verem cada coisa legal tem nesse blog belissimo!

      Excluir