Como colocar bordas automaticamente e com diversos estilos nas imagens dos posts? - * Blog Elaine Gaspareto *

Como colocar bordas automaticamente e com diversos estilos nas imagens dos posts?

em 21/06/2017

Como colocar bordas automaticamente e com diversos estilos nas imagens dos posts?

Uma das coisas mais legais que eu vejo em blogs bem feitos é o cuidado com as imagens, com as dimensões das imagens, com a qualidade delas e também com alguns efeitos que podemos aplicar às imagens do blog, em especial às imagens dos posts.
Tempos atrás eu publiquei um tutorial sobre isso, sobre efeitos nas imagens do blog.
Relembre:


Também mostrei como colocar aquele efeito legal de zoom nas imagens, relembre:



Ambos são tutoriais muito bons, e você pode fazer que com certeza darão certo.
Hoje, porém, quero te mostrar um jeito ainda mais personalizado de inserir efeitos nas imagens dos posts.
A vantagem em relação ao primeiro tutorial que linkei acima é que com esse código as bordas não serão aplicadas a todas as imagens dos posts automaticamente.
As bordas serão aplicadas apenas nos posts que você definir.
Isso pode ser interessante para destacar e diferenciar alguns posts apenas e não ter o mesmo efeito em todos os posts do blog.
Você pode ver a demonstração de como fica exatamente nesse post; olha a imagem que está no começo. Ficará assim.

Tem outro exemplo, com borda estilo groove. Veja:


Demonstração do tutorial



Outra vantagem é que você pode usar um estilo e cor de borda em cada post, se preferir.
Para fazer isso é bem simples. Comece acessando a página com o código que faz o efeito ser aplicado:


Copiar o código


A seguir faça seu post normalmente, carregue suas imagens normalmente, deixe tudo pronto.
Assim que terminar clique em HTML no alto do editor de postagens, ali mesmo onde você escreve seus posts.
Essa ação reverterá seu post para o modo HTML.
Cole então o código que faz o efeito acontecer ao final de seu post.
Clique em Visualizar. Dando tudo certo o efeito já aparece.
Clique então em Escrever para voltar o editor ao normal e publique seu post normalmente.
A mágica acontece!
Legal, né?


Explicando o código:


1px é a espessura dessa linha; Se desejar mais grossa altere o valor.
solid é estilo da linha. Solid corresponde a essa linha reta, mas você pode usar qualquer estilo de linha: dotted, dashed, etc...
#ffffff é a cor. Para trocar a cor da borda basta substituir o ffffff pelo código da cor desejada. Aqui no blog tem uma tabela de cores seguras para web.
Outline-offset corresponde à distância que essa linha vai ter em relação à borda.
Tenha em mente que valores positivos levam a linha pra fora da imagem e valores negativos levam a linha pra dentro da imagem.
E é justamente o valor negativo que faz esse efeito de moldura. Quanto maior for o valor negativo mais "pra dentro" a borda ficará.



Dica-bônus para você!



Mas pensa que acabou? Cabou, não!
Acesse esse site que gera os códigos CSS de vários tipos, cores e formatos de borda.

Quando achar um que te agrade copie o código gerado e substitua o código padrão que forneci pelo código CSS que você gerou no site.
Assim você tem centenas de opções diferentes de personalização das bordas de suas imagens dos posts.

Apenas não esqueça de que o CÓDIGO CSS deve sempre ser colocado entre os comandos que controlam o efeito.
Assim:

<style type="text/css">.post-body img {AQUI OS CÓDIGOS QUE DEFINEM O ESTILO }</style>

Exemplo de código CSS para borda branca, sólida:

<style type="text/css">
.post-body img {
outline: 1px solid white;
outline-offset: -12px;
}
</style>

Note que marquei em vermelho o CÓDIGO CSS.

Se quiser borda groove marrom e laranja:

<style type="text/css">
.post-body img {
outline-style:groove;
outline-width:7px;
outline-color: #FF8D3C;
outline-offset: 4px;
}
</style>


E assim, sucessivamente, com qualquer estilo que desejar usar.
Deixei os códigos todos abertos na página de códigos, ok?
No site que gera os códigos você pode brincar, testar estilos e cores, se divertir.

Para finalizar, uma dica extra:
Vamos supor que você, assim como eu, prefira usar só um estilo de borda em todas as imagens dos posts, automaticamente, sem precisar inserir manualmente em cada post.
Tem jeito, claro!
Basta colar este código:



Acima da tag ]]></b:skin> de fechamento de seu template e salvar. Deixei tudo pronto para copiar e colar na página de códigos, tá?

Simples e coloca a mesma borda em todas as imagens, de todos os posts, automaticamente.
Tem a imensa vantagem de que, se um dia enjoar, basta apagar o código de seu template e as bordas sumirão.
Não é magia, é tecnologia rsrsrsr



2 comentários via Blogger
comentários via Facebook

2 comentários:

  1. Salvando o post pra vir depois copiar alguns dos códigos para deixas as imagens lindas.
    beijos e adorei as dicas.

    Vidas em Preto e Branco

    ResponderExcluir
  2. Você é maravilhosa!! Obrigada por todas as dicas!

    http://fadaazulpoesias.blogspot.com/

    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…



Visualizações

Contando...

Dias online
Postagens
comentários