Blogger: Efeito afundando imagens no Blogger com CSS3

   Olá caros leitores, hoje estamos aqui com mais um artigo destinado ao Blogger, desta vez esse artigo foi criado graças ao pedido de Igor Luz do blog Transforblog, que pedia como adicionar o efeito que o Amotrix tinha na versão 3.0 de afundando as imagens do blog.

Observação: Iremos mexer no Código de Fonte do seu blog, então, recomendamos que você faça um backup do seu template e;ou testar em um blog de testes;

Em todo o blog

1. Instalando o efeito

  • Entre no Blogger e faça seu login;
  • Entre em Modelo *Painel >> Mais Opções >> Modelo*
  • Procure pela seguinte tag:
.post-body img {

  • E abaixo, coloque o seguinte código:
 
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
  • Após procure por: 
.post img:hover {


  • E abaixo, adicione o seguinte código:

-webkit-transform: rotate(0deg) scale(0.786) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.786) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.786) skew(1deg) translate(0px);

Salve, e pronto. O efeito está nativo em todo o blog.

Obs.: Em alguns blogs o efeito fica em funcionamento em todo blog exceto na região do layout.


Em determinadas imagens



1. Instalando o efeito


  • Entre no Blogger e faça seu login;
  • Entre em Modelo *Painel >> Mais Opções >> Modelo*
  • Procure pela seguinte tag:
]]></b:skin>

  • Adicione acima, o seguinte código:
.efeitoafundando{
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
}
.efeitoafundando:hover{
-webkit-transform: rotate(0deg) scale(0.786) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.786) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.786) skew(1deg) translate(0px);
}
  • Salve, e pronto. Espere, ainda tem mais coisa...

2. Ultilizando o efeito

    Agora para se usar o estilo, você deve estar em uma região de HTML. Eu recomendo que crie um widget teste.

  • Antes do código das imagens adicione a seguinte tag:

<div class="efeitoafundando">

  • E no final do código das imagens você adicione a tag de fechamento de classe div:

</div>

Previsão de como irá ficar o código:

<div class="efeitoafundando">
<a href="http://www.amotrix.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Um site para quem ama tecnologia" border="0" src="http://www.amotrix.webs.com/Imagens/Logo.PNG" title="Amotrix, um site para quem ama tecnologia"/></a>
</div>


--------------//-----------------

Pronto, o efeito já está adicionado, esperamos que tenham gostado do artigo. E um abraço para o Igor do Transforblog

Comentários