Blogger - Propriedade "opacity" em imagens [efeito suave]

http://amotrix.webs.com/Imagens/Logo.PNG
    Olá caros Bloggers, hoje iremos com mais um tutorial para dar efeito as imagens em seu blog, diferente ao já publicado aqui — Blogger - Propriedade "opacity" em imagens — o efeito será usado com outra propriedade, a "transitionas" que com qualificações dará a bele transição suave.
   Enfim, já foi discutido os detalhes, agora vamos a ação. Lembrando presta atenção a cada detalhe de processo de aplicação do efeito ao seu site. Então, vamos começar:

Aviso:
Antes de começar, por faovr, siga as recomendações abaixo:

http://amotrix.webs.com/Imagens/Citacoes/Placa/Conselho.PNG  faça um backup de seu template; e/ou
  teste primeiramente em um blog de testes.



 Acesse o Blogger e faça seu login.

Efeito Desclareamento
1 - Entre em Modelo | Painel > Mais Opções > ModeLO
2 - Clique em Editar HTML
3 - Clique em na caixa Expandir modelos de widgets
4 - Agore procure por:
.post img {
padding:4px;
border:1px solid $bordercolor;
}

   Caso não tenha achado o código citado acima, procure por:  .post-body img { — pois em alguns blogs a etiqueta responsável pelas imagens pode se modificar de acordo com o modelo.


5 - Selecione-o todo e substitua por:
.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);
    filter: alpha(opacity:0.5);
    KHTMLOpacity: 0.5;
    MozOpacity: 0.5;
   -webkit-transform:scale(1.0);
   -moz-transform:scale(1.0);
   -o-transform:scale(1.0);
   -webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   opacity: 0.7;
   -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;
    filter:alpha(opacity=50);
    }
    .post img:hover {
    filter: alpha(opacity:1);
    KHTMLOpacity: 1;
    MozOpacity: 1;
    -khtml-opacity:.1;
    -ms-filter:"alpha(opacity=100)";
    -moz-opacity:1;
    filter:alpha(opacity=100);
    opacity:1;
    }
6 - Clique em Salvar Modelo

Efeito Clareamento
1 - Entre em Modelo | Painel > Mais Opções > ModeLO
2 - Clique em Editar HTML
3 - Clique em na caixa Expandir modelos de widgets
4 - Agore procure por:
.post img {
padding:4px;
border:1px solid $bordercolor;
}

   Caso não tenha achado o código citado acima, procure por:  .post-body img { — pois em alguns blogs a etiqueta responsável pelas imagens pode se modificar de acordo com o modelo.


5 - Selecione-o todo e substitua por:
.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);
    filter: alpha(opacity:1);
    KHTMLOpacity: 1;
    MozOpacity: 1;
    -khtml-opacity:.1;
    -ms-filter:"alpha(opacity=100)";
    -moz-opacity:1;
    filter:alpha(opacity=100);
    opacity:1;    }
    .post img:hover {
    filter: alpha(opacity:0.5);
    KHTMLOpacity: 0.5;
    MozOpacity: 0.5;
   -webkit-transform:scale(1.0);
   -moz-transform:scale(1.0);
   -o-transform:scale(1.0);
   -webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   opacity: 0.7;
   -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;
    filter:alpha(opacity=50);    }
6 - Clique em Salvar Modelo


Comentários