Como colocar efeitos nas imagens dos posts

em 7 de janeiro de 2016

Como colocar efeitos nas imagens dos posts

De vez em quando a gente quer dar uma caprichada nas imagens do blog, né?
E saber um efeito legal pra colocar pode ajudar, ainda mais se for algo bem fácil e que a gente pode tirar caso enjoe...
Vou ensinar alguns efeitos, você escolhe qual usar ou testar primeiro, tá?


Primeiro efeito- bordas arredondadas


O primeiro efeito arredonda as imagens quando passamos o mouse sobre elas.
Veja aqui o código e o efeito.

Para colocar em seu blog vá ao painel de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e abra o código-fonte de seu blog.
Dentro da caixa de códigos tecle Ctrl+F.
Vai expandir a barra de pesquisa.
Dentro dela digite ]]></b:skin> e tecle Enter para localizar.
ACIMA disso cole este código:

Copiar o código Arredondar


Edite para ficar como você deseja:
→ Para aumentar o arredondamento da imagem em estado normal altere os valores em border-radius: 10px 10px 10px 10px;
Se quiser deixar a imagem sem arredondar no estado normal troque os valores por 0.

→ Para alterar o grau de arredondamento nas imagens em estado hover altere em border-radius: 200px 200px 200px 200px;
Se quiser arredondar só um ou 2 lados, mexa nos valores até ficar como deseja.

Salve.
Tá feito, simples e fácil.
Se desejar retirar basta excluir o código e tudo volta a ser como era.


Segundo efeito- Imagem em preto e branco


Esse efeito é lindo!
Ele coloca a imagem em preto e branco quando passamos o mouse sobre ela.
Veja aqui o efeito!
Passe o mouse sobre a imagem e veja que lindo!

Para colocar em seu blog cole, acima de ]]></b:skin> este código:

Copiar o código Preto & Branco

Salve, e tá feito.
Se um dia quiser tirar exclua o código e salve.


Terceiro efeito- Bordas nas imagens dos posts


O último código coloca bordas nas imagens dos posts.
Não tem demonstração porque é bem simples.
Este é o código:

Copiar o código Bordas nas imagens


Faça as alterações desejadas no código:

→ Você pode escolher se quer borda sólida (solid), pontilhada (dotted), tracejada (dashed) ou dupla (double).
→ 1px - Altere o valor de "1" para aumentar a largura da sua borda.
→ Em #dddddd é o código da cor. Troque pela cor que desejar.
→ Define se a borda será ou não arredondada.
Altere os valores para mais ou para menos, conforme desejar. Se quiser borda quadrada coloque 0 como valor.
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Cole o código acima de ]]></b:skin> e salve.
Fica bonitinho e diferenciado...


Facinho, né?
Qual você vai testar em seu blog?
Enjoy!

Alguém que escreve. Especialista em si mesma. Leitora voraz. Blogueira apaixonada. Propriedade (atualmente) de 3 cachorras e um cachorrinho muito levado. Casada desde 1995 com o mesmo marido. Feliz.

12 comentários , comente também!

  1. É bem legal mudar o blog as vezes, mesmo que sejam nos detalhes. Amei a ideia, usarei!

    Beijos | Post novo!
    http://anaportoblog.blogspot.com.br/

    ResponderExcluir
  2. Vou testar o código para imagem em preto e branco. Adorei! Bom FDS!

    ResponderExcluir
  3. great post!

    would you like to follow each other on GFC & G+? If you follow me,
    I will follow you back after it.
    www.tomntins.com

    ResponderExcluir
  4. Adorei as dicas, as vezes um detalhe faz toda a diferença.
    Bjs❤

    ResponderExcluir
  5. Amei MUITO essa dica.
    Beijos
    sundaisie.blogspot.com

    ResponderExcluir
  6. Amando seu Blog elaine, O unico que tá conseguindo me ajudar com HTML sem erros, acerto tudo de primeira!!! Ótimo pra mim que estou começando a mexer em blog agora <3

    ResponderExcluir
  7. Muito legal, vou testar. Bjs flor

    http://superjujuba.blogspot.com.br/

    ResponderExcluir
  8. Olá Elaine,

    Tenho um problema com a partilha do post. Sempre que tento partilhar o post aparece uma imagem que nem sequer consta no meu blog, mesmo aparecendo o slide de escolha da imagem, quando seleciono a correcta quando clico em ''publicar'' aparece a imagem errada. Qual será o problema?

    Obrigada,
    Lígia

    http://lifestyleandcompany.blogspot.pt

    ResponderExcluir
  9. Usei o preto e branco, lindo !! arrasando como sempre ..

    bjo


    http://naiamelo.blogspot.com.br/ (Ciranda da Bailarina)

    ResponderExcluir
  10. Realmente ótimas dicas ameiiii todas...
    Vc sempre tem ótimas dicas
    Bjsss


    http://jeniferizidoro.blogspot.com.br/

    ResponderExcluir
  11. Usei o preto e branco, ficou lindo! Um dos melhores posts de todos.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…