Tutorial: Efeito Mirajane

| |


Esse é o efeito que tem no layout Free que disponibilizei da Mirajane. Ele tem esse nome pois fiz especialmente para o layout dela. O segundo efeito só modifiquei o do Kawaii World então créditos para lá. Você pode ver o exemplo AQUI


Vá em editar HTML e procure por ]]></b:skin> e acima cole: 


EFEITO 1

.Mirajaneft {
padding: 1px;
border: 1px solid #DCDCDC;
cursor: pointer;
margin-left: 5px;
}
.Mirajaneft:hover {
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
}



EFEITO 2

Vá até editar HTML e procure por <head>. Abaixo da tag, cole o seguinte:

<link href='http://static.tumblr.com/0xqvkot/MdKmj9am9/flippingkw.css' media='screen' rel='stylesheet'/>

Agora procure por procure por ]]></b:skin> e acima cole:


.Mirajaneft2 {
padding: 1px;
border: 1px solid #DCDCDC;
cursor: pointer;
margin-left: 5px;
}
.Mirajaneft2:hover {
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
-moz-opacity: 0.65; filter: alpha(opacity=65);
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipping;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipping;
-o-backface-visibility: visible !important;
-o-animation-name: flippink;
backface-visibility: visible !important;
animation-name: flipping;
-webkit-animation-duration: 1s;
}

Faça os ajustes necessário, visualize e se estiver tudo certo salve


Em  gadget de HTML/JavaScript, cole:

Do efeito 1

<a href="LINK" title="NOME">
<img src="LINK IMAGEM 1" onmouseover="this.src='LINK IMAGEM 2'" onmouseout="this.src='LINK IMAGEM 1'"class="Mirajaneft" /></a>

Do efeito 2

<a href="LINK" title="NOME">
<img src="LINK IMAGEM 1" onmouseover="this.src='LINK IMAGEM 2'" onmouseout="this.src='LINK IMAGEM 1'"class="Mirajaneft2" /></a>



Obs: A imagem 1 deve ser diferente da imagem 2 para que ocorra o efeito de mudar as imagens. 


2 comentários:

» 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