domingo, 12 de junho de 2011

Efeito de zoom giratório nas imagens dos posts com css3

Papel de parede cblogger

Muitos novos recursos vieram no css3, e alguns recursos que se destacam são alguns efeitos como rotação, tamanho e sombra. E aproveitando esses ótimos recursos, neste tutorial vou ensinar com dar um efeito de zoom giratório nas imagens das postagens a partir de códigos do CSS3. Não vamos usar absolutamente nenhum código em javascript, jquery, ou qualquer outra linguagem, apenas CSS.

Você pode estar vendo como vai ficar este efeito através do meu portfolio clicando aqui.

Vamos ao nosso principal objetivo, colocar o efeito. Primeiramente, acesse o ‘Editar HTML’ do seu blog e pesquise pelo seguinte código:

]]></b:skin>

ACIMA  dela acrescente os seguintes códigos CSS:

.post-body img {
z-index:999999;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
}

.post-body img:hover{
z-index:9999;
-webkit-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-moz-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
-o-transform: rotate(360deg) scale(1.302) skew(0deg) translate(7px);
}

Depois é só salvar e pronto. Efeito bem legal em suas postagens, sem usar qualquer programação avançada, somente css, deixando suas postagens mais interativa sem deixa-la pesada.

Marcadores: , , , ,

19 Comentários:

Às 16 de junho de 2011 10:54 , Blogger JUNINHO disse...

Eu Quero Retirar como Faço agora ?

 
Às 16 de junho de 2011 16:50 , Blogger Códigos Blogger disse...

Para retirar é só excluir as partes do código acima contida no html do seu blog.

 
Às 3 de julho de 2011 13:46 , Blogger Polaca disse...

ameeeiii, muito obrigada!!!

 
Às 3 de julho de 2011 13:47 , Blogger Polaca disse...

por favor posta pra gent como colocar esse passarinho do twitter voando pelo site..... por favor

 
Às 3 de julho de 2011 22:13 , Blogger Códigos Blogger disse...

Na vdd já temos um tutorial pronto. Apenas clique no link abaixo:

http://www.cblogger.net/2011/01/como-colocar-um-passaro-retwitter-no.html

Não esqueça de deixar seu comentário. ;D

 
Às 24 de julho de 2011 14:54 , Blogger Balbino disse...

é possivel adicionar esse efeito a imagen do cabeçalho?

Onde posso saber mais sobre os novos recursos do CSS3?

 
Às 24 de julho de 2011 23:34 , Blogger Códigos Blogger disse...

Veja pelo link abaixo:

http://www.css3.info/preview/

 
Às 7 de agosto de 2011 22:26 , Blogger Fábio Rodrigo disse...

Muito obrigado pela dica. Coloquei no meu blog. Ficou show.

http://sodocesesabores.blogspot.com

 
Às 13 de agosto de 2011 14:38 , Blogger Paulo Douglas disse...

tem como diminuir o tamanho dele depois quando passamos on mause deixa no amanho original?

 
Às 14 de agosto de 2011 20:34 , Blogger Códigos Blogger disse...

@Paulo Douglas Sim, apenas altere o número 1.302 contido em ".post-body img:hover{" do código. Este número determina o tamanho da imagem no estado Hover.

 
Às 13 de novembro de 2011 01:44 , Blogger Humor 2D - Animações em duas dimensões disse...

é bem legal o efeito, mas tem como deixa sem o zoom

 
Às 14 de novembro de 2011 22:57 , Blogger Códigos Blogger disse...

Humor 2d, tem sim, é só excluir alterar os trechos escrito:

360deg

Para:

0deg

 
Às 14 de novembro de 2011 23:47 , Blogger Humor 2D - Animações em duas dimensões disse...

valeu pela resposta

 
Às 20 de novembro de 2011 17:53 , Blogger Jonaz Lima disse...

como colocar isso na sidebar?

 
Às 20 de novembro de 2011 17:59 , Blogger Jonaz Lima disse...

Nossa! eu coloquei o assim .sidebar1-body img { e todas as imagens do blog tinha hover zoom u.u

 
Às 20 de novembro de 2011 21:44 , Blogger Códigos Blogger disse...

Hehe, conseguiu então?

 
Às 2 de dezembro de 2011 16:47 , Blogger Lucas Ribeiro disse...

te mcomo colocar esse efeito em algum widget?

 
Às 11 de janeiro de 2012 23:56 , Blogger Izaque disse...

Nossa gosyei muito parabéns cara

 
Às 9 de julho de 2012 20:01 , Blogger Stephanie disse...

Adorei o tutorial, fica muito legal no blog.

Bjuus

fannydream.blogspot.com

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial