2

Tutorial Efeito Opacity!

Postado por -A às 13:57
Reações: 
OPÇÃO UM:
1- Copie este código#TUTORIAL#:



<img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="(URL da imagem)" style="opacity: 0.5;" widht="" width="180" />



2 -Edite no word a parte com "URL da imagem" pelo URL da imagem ava
3- Vá em Design Adicionar um gadget HTML/JavaScript Cole o código(não coloque titulo)

Se a Opção um não deu certo tente esta que foi retirada do Blog das meninas Blogueiras:
EX.
Para fazer este efeito só é necessário usar o HTML do post.

Primeiro clique em nova postagem Editar HTML:
Depois cole este código:
<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="
URL-DA-IMAGEM" /></a>
Onde esta de vermelho coloque o link do seu blog e onde esta de azul coloque o URL da imagem.


Se naum funcionou nem um dos 2 tente esse que foi retirado do blog Cherry Bomb:

Vou ensinar para vocês usando o código do MadlyLuv, que foi o que eu achei mais simples e funcional.
Vamos começar? Então abra o seu blog, e vá no HTMl dele. Aperte Ctrl+F e procure por ]]></b:skin>
Cole Antes de ]]></b:skin> o código abaixo:
/****** opacidade - MADLYLUV.COM ******/
.opacidade
{filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;}

.opacidade:hover
{filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;}
Salve as alterações.
Quando quiser deixar uma imagem com esse efeito, é só acrescentar class="opacidade" no código na imagem, vai ficar assim:
<img src="http://i55.tinypic.com/t7nxuf.jpgclass="opacidade"/>


Se naum funcionar ai ja era mais ai vai outro codigo que tambem foi retirado do blog Cherry Bomb:




Para colocar esse efeito, é só ir no HTML do seu blog, apertar Ctrl+F e procurar por ]]></b:skin>
Cole logo acima esse código:
.border {
-moz-opacity:0.70; opacity:0.70;
-webkit-transition-duration:2s;
background-color:#e7b3c2 /*Cor de fundo, aparece enquanto a imagem está carregando*/;
border:2px solid #c8debf; /* Cor e estilo da borda*/ }
.border:hover  {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
background-color:#e7b3c2; /*Cor de fundo quando passa o mouse em cima*/
border: 2px solid #f2ada5; /* Cor e estilo da borda quando passa o mouse em cima*/
}

Salve as alterações.
Para o código funcionar, você tem que por a tag class="border" no código da imagem, assim:
<img src="linkdaimagem" class="border"/>



OBS: Sempre edite os códigos do blog no word!

2 mimadas comentáram:

Franciele on 16 de novembro de 2011 16:18 disse... [Responder comentário]

Bem legal o tutu, vou tentar fazer..
Coloquei seu link-me na minha página também..

Ah e sobre o tutu que vc me pediu, te passo o link do blog onde encontrei tah??

Bjok´s, Fraan

Franciele on 16 de novembro de 2011 16:27 disse... [Responder comentário]

O post do tuto é esse:
http://isjackiezzdream.blogspot.com/2011/10/baloes-personalizados-com-o-numero-de.html#more

Quem já passou por aqui ....

Cursor










Quanto tempo para PLL 2x14

para Pretty Little Liars, 2x14
Related Posts Plugin for WordPress, Blogger...
 

Mimos de Moda ©