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