terça-feira, fevereiro 23, 2010

Efeito de alpha em todas suas imagens no blogger

Nessa postagem irei ensinar a vocês como que se deixa uma imagem semi-transparente… Quando você passa o mouse por cima ela pode ficar mais clara ou o contrário…
  Imagem 1 (sem o mouse por cima)Imagem 2 (com o mouse por cima da figura)
Como vocês podem ver, esse é o e feito… Na imagem 1, é a figura normal. Na imagem 2, é a figura com o mouse por cima…
Esse efeito pode acontecer ao contrário também… É só modificar o código…(Eu ensino na vídeo aula)…
Você pode inserir esse efeito apenas nas imagens das postagens ou apenas nas imagens das colunas laterais…
Para inserir o código, entre no blogger… vá em Layout, Editar Html… De um Ctrl+F para procura por Body { , após encontrar cole o código após Body {…….}, (depois que fechar chaves }   )… 
O código é este….
img {
filter:alpha(opacity=99);
-moz-opacity:0.99;
opacity:0.99;
}
img:hover {
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
}
Semelhante ao meu blog…
Caso queira apenas nas postagens esse efeito insira esse código…
.post img {
filter:alpha(opacity=99);
-moz-opacity:0.99;
opacity:0.99;
}
.post img:hover {
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
}

Se você quiser apenas nas colunas laterais insira esse código…
.sidebar img {
filter:alpha(opacity=99);
-moz-opacity:0.99;
opacity:0.99;
}
.sidebar img:hover {
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
}

O que diferencia os dois últimos para o primeiro é que na frente de img tem:  
.post  ou .sidebar …

Vejam a vídeo aula para tirar suas dúvidas…

Gostou??? de um Ctrl+D

Nenhum comentário:

Postar um comentário

Leia as regras
Todos os comentários são lidos e moderados previamente.
São publicados aqueles que respeitam as regras abaixo:

- Seu comentário precisa ter relação com o assunto do post;
- Em hipótese alguma faça propaganda de outros blogs ou sites;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Ofensas pessoais, ameaças e xingamentos não são permitidos;
_ Sempre que enviar um comentario deixe seu E-mail, principalmente no caso de perguntas, Caso contrário não terá como haver resposta...

Nos tutoriais:
- Leia os comentários, sua dúvida pode já estar respondida;
- Caso não esteja, não garanto resposta para as perguntas...

Baixar Subir