3 de jan. de 2013

Efeito Opacity Nas Imagens


Hey amores,trouxe mais um tutorial super divertido e fácil,nada de HTML,que tal mecher com o CSS?!
Bom,O efeito é o seguinte,a imagem estará um pouquinho mais clara,aí quando você passar o mouse nela ela ficará com a cor normal. Tipo assim,passe o mouse na imagem abaixo:


Percebeu alguma coisa? Pois é,esse é o efeito Opacity. Que tal aprender?...

1# Primeiro vá em Design > Personalizar > Avançado > Arraste a barre de rolagem até o final e aparecerá algo envolvendo CSS,clique > Aparecerá uma caixa para digitar texto,cole esse código:

.main img {
filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
}
.main img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
duration: 50s;
}

Não precisa editar nada,só clique em ''Aplicar ao blog'' e prontinho... Todas as imagens do seu blog ficarão com esse efeito!

Beijos,
Luisa...

4 comentários:

  1. É muito facinho, fica lindo.
    Já sabia fazer!
    NOVO POST!

    http://bit.ly/W8fs7v

    ResponderExcluir
  2. Awn, adorei o tutorial, muito útil, acho muito legal esse efeito!

    Amei seu blog, muito lindoooo!!!!Parabéns!
    Já virei seguidora!Poderia me ajudar com a minha meta de 550 seguidores? Agradeço desde já. Obrigada. Espero sua visita.
    Bisous.

    pequenomuffin.blogspot.com

    ResponderExcluir
    Respostas
    1. brigada flor,você é muito simpática,e seu blog super cute!!!
      bijinhos....
      Luisa.

      Excluir

- Não faço parcerias, apenas afiliações. (Mas no momento sem vagas).
-"Seguindo,segue de volta?" Seguirei os blogs que eu realmente gostar.
- Não aceito selinhos (Só de afiliados).
- Deixe o link do seu blog para eu visitá-lo