Efeito Runner


 Olá, tudo bem com você? Como primeira postagem do Blog, decidi trazer um efeito bem simples e fácil de se fazer. O nome do efeito, como está no nome da postagem, é Runner. É bem simples, é apenas uma foto redonda com o efeito hover em que uma borda transparente e uma sombra aparecem, além da imagem girar levemente para o lado. Ele é bem legal e você pode visualiza-lo no link a seguir:

Clique em Leia Mais para aprende a aplicar o Efeito no seu blog.

CSS

1. Vá em Modelo > Editar HTML. Clique na caixa de códigos e aperte F3 ou Ctrl + F. Pesquise por ]]></b:skin>, acima deste código cole:
#runner{ -moz-transition: all 0.8s ease-out; -moz-webkit-transition-duration: .50s; -webkit-transition-duration: .500s; padding: 5px; overflow:hidden;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
margin-left: 3px;
box-shadow: 0 0 15px transparent;}
#runner:hover{ -moz-webkit-transition-duration: .50s; -webkit-transition-duration: .500s; -webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
box-shadow: 0 0 15px #ccc;
}
1.1. Não é necessário fazer a mudança de qualquer código.

2. Salve.

aplicando o efeito

1. Vá em Layout, clique em Adicionar um gadget > HTML/JavaScript. Nele cole o seguinte código:
<img id="runner" src="LINK_DA_IMG" width="100px" />
2. A parte em negrito, é o link da imagem (deixarei algumas no fim do post). A parte em itálico é o tamanho da imagem, eu coloquei 100px que é o tamanho que tem no preview, acho que fica muito grande para sidebar, mas substitua pelo tamanho que quiser.



Créditos: x - xx
Qualquer dúvida sobre o tutorial, entre em contanto pelos comentários ou pela ask. Não se esqueça dos créditos! Tchau :3
Compartilhe no Facebook
Compartilhe no Twitter
Compartilhe no Google+

8 comentários, comente também!

  1. Ficou muito lindo o efeito <3 <3 <3

    www.c-astle.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigado, que bom que gostou <3

      Excluir
  2. Que efeito legal. *-* Sem falar do icon da minha Lily ali. ♥

    XOXO

    ResponderExcluir
    Respostas
    1. Também achei legal, simples mas legal :3

      Excluir
  3. Adorei as imagens e o efeito, é bem fofo (:
    xoxo
    -> Simplificando

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado c:

      Excluir
  4. Lecal o efeito :3 amei o novo layout nem tinha vista ainda çrçrçrç

    Gallery-peace.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Lecal mesmo, que bom que gostou <3

      Excluir

• Peça tutoriais em 'Contato'
• Comente com o link do seu blog para que eu posso visita-lo
• Você pode usar as Tags negrito, itálico, links...

Créditos



O Projeto Aurora foi criado completamente, com tutoriais disponíveis no blog, por mim, Alan Felipe Jantz.

Para as postagens 'reblogadas', os créditos do local de origem dos tutoriais está no final da postagem.

Todos os ícones utilizados neste template foram pegos no flaticon.com, todos os direitos reservados para os autores dos mesmos.





Algo que é seu está aqui, mas não foi creditado?
Entre em contato clicando na aba 'Contato' do menu para receber seus créditos!
BouquetNOVO
The Only ExceptionNOVO
Wide AwakeNOVO
Simple BaseNOVO
NatureNOVO
Why so Pink?NOVO
Why So Blue?NOVO