Efeito CSS nas imagens do Blog (Versão 3)

► +A +/- -A
Olá Amigos leitores! Quanto tempo não é mesmo, hoje começamos com uma novidade, o Efeito CSS nas imagens do blog Versão 3, Os elementos que constituem este efeito são o shadow (sombra) e a propriedade border-radius. Então Vamos ao Tutorial!

Caso queria observar as versões 1 e 2 visite os seguintes links:
Observe a imagem de demostração do efeito já instalado a imagem:
 



Instalando o efeito CSS nas imagens do Blog

1. Faça login no Blogger
2. Em seguida no menu suspenso, clique em Modelo.
3. Em seguida clique no botão em Editar HTML
4. E procure pela seguinte tag:

]]></b:skin>

5. E acima do código Citado acima, adicione o seguinte código:

.post-body img {padding: 5px;background: white;border: 1px solid #bebebe;box-shadow: -20px 20px 20px rgba(0,0,0,0.35);
-moz-box-shadow: -20px 20px 20px rgba(0,0,0,0.35);
-webkit-box-shadow: -20px 20px 20px rgba(0,0,0,0.35); border-radius:3px;-moz-border-radius:3px;-webkit-border-radius

6. Após isso clique em Visualizar, e se estiver tudo corretamente como desejado clique em Salvar Modelo!

Pronto, terminamos, esperamos que tenham gostado.
Abraços, Até a próxima!
► Postagens Relacionadas:

5 Comentários

Herlan Santos disse...

Olá Caio.
Gostei do efeito, muito bom o tutorial.
Abraços!

23 de maio de 2012 14:02
Caio Vinicius disse...

Olá Herlan, Que bom que gostou do efeito, fico grato.
Abraços, Até mais!

23 de maio de 2012 15:59
Eliana disse...

Oi caio, adorei o efeito achei bem fácil de instalar, muito bom, parabéns...
abraços ... Eliana

28 de maio de 2012 16:05
Bruno disse...

Gostei .. muito interessante este efeito, parabéns!

att bruno.

29 de maio de 2012 06:38
Lucas Lopes disse...

O Dia que isso for dificil de instalar porfavor me de uma facada!

14 de setembro de 2012 14:30

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!