12 fevereiro 2013

Pedido - efeito giratório/fica redondo e com blur




Hoyy mores hoje eu vim com um pedido que foi da Asuna ;3 o tutorial é o efeito que eu uso na imagem de “Welcome” aqui no blog e na elite de afiliados. A imagem é normal é quando passa o mouse, ela gira,fica redonda e com opacidade.


Um exemplo
Passe o rato em cima Do gif


                                    

se aqui não funcionar bem, tente na elite de afiliados aqui do blog.

O nome desse efeito é efeito giratório/fica redondo e com blur. Nome gigante né? Eu aprendi esse tuto lá no Garotas Cupcakes então todos os créditos são de lá.esse efeito funciona em praticamente   todos os tipos de imagens.
Vamos aprender?? É bastante fácil eu juro \o/

Vá no seu HTML e procure por ]]></b:skin>
E acima dessa tag cole

.elite{
width:auto;
-webkit-transition-duration: 1.20s;box-shadow: 2px 1px 2px #909090;margin: 1px;border: none;filter: alpha(opacity=100);moz-opacity :1.0;opacity: 1.0;-webkit-transition: 0.5s;filter: none; -webkit-filter: blur(0); -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease;}.elite:hover{-webkit-transform: rotate(360deg);-webkit-border-radius: 50px;-moz-border-radius: 50px;
border-radius: 50px;
margin: 1px;border: none;margin-left: 0;
-webkit-filter: blur(2px);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}
 Não precisa mudar nada de nada.

Agora adicione um gadget HTML/javscript
E cole

<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>

Repita o código quantas vezes foi necessário.

 esse efeito não fica muito legal com os png's e convencionais que usam por ai, fica melhor com os de artista eu uso tamanho 50x50, se quiserem de algum artista ou coisa do tipo, peçam na ask

Créditos a Garotas Cupcakes







5 comentários:

  1. esse efeito é lindooo ameiii o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  2. Adorei!
    Vou usar no meu próximo layout!

    ResponderExcluir
  3. Como faço pra colocar o efeito que tem na primeira imagem sua???

    ResponderExcluir
    Respostas
    1. Eu não entendi muito bem o que você quis dizer, mas se o efeito das minas ilustrações de post. É só seguir esse tutoriail ;)

      http://blog-part-of-me.blogspot.com.br/2014/03/efeito-vintage-nas-imagens-do-blog.html#more

      Excluir

» Nossas redes sociais: Fã page | | Instagram | | Pinterest

» Críticas construtivas são sempre bem vindas.

» Deixe o link do seu blog no final do comentário e retribuiremos a visita com carinho.

» Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2019. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo