27 de out de 2012

Tutorial - Efeito Opacity


Hey Girls, hoje vim ensinar duas maneiras do Efeito Opacity
Continue Lendo...


1º maneira = Sua imagem já está com o efeito e ao passar o mouse ela volta ao normal.
2º maneira = Sua imagem está normal e ao passar o mouse ela fica com efeito opacity.

1º Maneira

1- Vá em Modelo -> Editar HTML -> E procure por:
]]></b:skin>
2- Acima,cole esse código:
.main img {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
}
.main img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
duration: 50s;

3- Agora vou explicar como personalizar o código.

A primeira coluna é a imagem normal,e a segunda é como ela fica com o mouse por cima.
Como essa é a 1a maneira,nós queremos personalizar a imagem normal,
então vamos personalizar somente a primeira coluna.

Onde está escrito 80 e 0.80 você pode personalizar.
Quanto menor o número,mais efeito opacity fica a sua imagem(normal).
Se mudar o 80 para 70 ,terá que mudar o 0.80 para 0.70. E vice-e-versa.

4- Após já tiver personalizado,clique em salvar e pronto !


2º Maneira

1- Vá em Modelo -> Editar HTML -> E procure por:
]]></b:skin>
2- Acima,cole esse código:
.main img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
.main img:hover {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
duration: 50s;
3- Agora vou explicar como personalizar o código. 

A primeira coluna é a imagem normal,e a segunda é como ela fica com o mouse por cima.
Como essa é a 2a maneira,nós queremos personalizar a imagem com o mouse por cima,
então vamos personalizar somente a segunda coluna.

Onde está escrito 80 e 0.80 você pode personalizar.
Quanto menor o número,mais efeito opacity fica a sua imagem(com o mouse por cima).
Se mudar o 80 para 70 ,terá que mudar o 0.80 para 0.70. E vice-e-versa.

4- Após já tiver personalizado,clique em salvar e pronto !

Espero que tenham gostado do tutorial, Beijinhos :)
Créditos:Brilho dos Olhos

Nenhum comentário:

Postar um comentário