Tutorial: Efeito Line

| |

Aye
  Vou postar agora o efeito Line. Poderão ver no exemplo AQUI.
Ele também tem um efeito que gira para o lado quando se passa o mouse.


Vá em editar HTML e procure por ]]></b:skin> e acima cole um dos efeitos a baixo : 


EFEITO LINE

.line{
float: left;
width: 60px;
height: 46px;
margin-right: 12px;
margin-top: 15px;
background-color: #ccc;
-webkit-transform:  scale(1.100);
color: #DCDCDC;
border: 2px solid #DCDCDC;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.line:hover{
background-color: #ccc;
-webkit-transform:  scale(1.100);
color: #DCDCDC;
border: 3px solid #DCDCDC;
line-height: 10px;
box-shadow: rgba(0,0,0,.5) 0 2px 8px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg); transition-duration: 60s;
-webkit-transition-duration: .60s;}
Troque onde está destacado de roxo 
Visualize e se estiver tudo certo salve.

Em  gadget de HTML/JavaScript, cole:

EFEITO LINE
<a href="LINK" title="Nome do blog"><img src="LINK DA IMAGEM" class="line"/></a>

Agora é só substituir onde está de roxo e pronto. 

Nenhum comentário:

Postar um comentário

» Fiquem à vontade
» Respeite a todos e não ofenda ninguém
» Não gostou do blog? Não precisa sair xingando ofendendo todo mundo, aceitamos sugestões, mas tenha educação.
» Caso não obedeça às regras seu comentário não será publicado