sexta-feira, 23 de setembro de 2011

Título dos posts com efeito - movimento CSS3

blog-post-edit-iconQue tal deixar os títulos de suas postagens com um belo efeito CSS3? Praticamente tudo em nosso blog tem que ser interativo para que nossos visitantes tenham uma boa impressão, então nada melhor deixar interativo aquilo que seja mínimo. Devemos cuidar do nosso blog e se preocupar com seu designer nem que seja nos pequenos detalhes, e os títulos das postagens não podem ficar de fora.

O efeito trata-se de uma transição CSS3 que movimenta o título quando posicionamos o cursor sobre ele, um efeito hover.

Agora vamos aplica-lo em seu blog. Para isso, entre no painel principal do seu blog e acesse o “Editar HTML”. Já no HTML do blog, procure por:

.post h3 a, .post h3 a:visited, .post h3 strong {

Abaixo dessa linha cole o seguinte código CSS:

-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;

Agora procure por:

.post h3 strong,.post h3 a:hover {

Abaixo dessa linha cole o seguinte código:

-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);

Pronto! Agora é só deixar seus visitantes e seguidores desfrutarem da novidade em seu blog.

Marcadores: , , ,