29 de agosto de 2009

Bordas nas imagens do blog usando CSS


Sempre utilizamos imagens (fotos, figuras, gráficos) para ilustrarmos de uma forma mais eficiente, as mensagens que passamos para os leitores de nossos blogs. Como uma imagem vale por mil palavras, nada melhor do que darmos uma incrementada em sua exibição, dessa forma deixamos os posts mais personalizados. Podemos fazer diferentes efeitos utilizando simples códigos CSS.

Para quem ainda não sabe o que são Códigos CSS ou simplesmente CSS, o site Código fonte, responde essa questão:

CSS (Cascading Style Sheets ou Folha de Estilos em Cascata), é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Segundo o que acabamos de ler, podemos dizer que os códigos CSS são responsáveis pela formação de elementos que compõem o layout de documentos HTML ou XML, tais como, fontes, cores, margens, linhas, alturas, larguras, imagens, posicionamentos, entre outros.

É sempre bom saber um pouco mais sobre os codígos CSS, pois como o Blogger utiliza a linguagem HTML/XML nas configurações dos seus blogs, pode-se evitar muita dor de cabeça. Esta foi apenas uma palhinha sobre CSS, no futuro iremos falar mais sobre este tema. Por hora, vamos aprender a dar um estilo diferenciado as imagens nos posts.

Entre no seu blog -> Layout -> Editar HTML e salve as configurações atuais do seu blog. Se você ainda nao sabe como fazer isso, clique aqui. Com a ajuda do Ctrl+F encontre o código que está logo abaixo ou que seja semelhante a ele:

.post img {
margin: 5px;
...
padding: 3px;
}
É através desse código que configuramos a forma como as imagens vão aparecer nos posts do blog. Caso você não tenha encontrado o código acima, não se desespere, basta acrescentar acima da tag </head>, este código aqui:

<style type="text/css">
.post img {
border: 0px;
}
</style>
O trecho em vermelho refere-se a espessura das bordas das imagens que vão aparecer nos posts, quanto maior o número (1px, 2px, 3px etc), mas espessa a borda se tornará.

Acrescentando e/ou alterando elementos como cor, espessura e forma, podemos deixar as imagens com apresentação mais personalizada. Veja alguns exemplos:

1 - Colocando cor na borda

.post img {
border: 1px solid #00ff00;
}
Obs.: Neste exemplo temos uma borda de espessura simples na cor verde.

2 - Efeito hover na borda

.post img {
border: 5px solid #bpc4de;
}
.post img:hover {
border: 5px solid #f5deb3;
}
obs.: Para obtermos o efeito hover (alteração da cor quando passamos o mouse sobre a imagem) é necessário acrescentar o trecho que está em vermelho. Lembrando que a cor e a espessura da borda pode ser alterado.

3 - Borda dupla

.post img {
border: 5px solid #006400;
padding: 5px;
background: #d5d5d5;
}
Obs.: border é referente a espessura e a cor da borda externa; padding e background são, respectivamente, a espessura e a cor da borda interna. Estes itens podem ser configurados.

4 - Borda dupla com efeito hover

.post img {
border: 5px solid #f5deb3;
padding: 5px;
background: #d5d5d5;
}
.post img:hover {
border: 5px solid #20b2aa;
padding: 5px;
background: ##f5deb3;
}
Obs.: A junção dos exemplos 2 e 3.

5 - Borda com um efeito de sombra

.post img {
background: url(http://img53.imageshack.us/img53/4622/shadowv.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;
}

Obs.: O feito de sombra é dado pelo trecho background: url(url_da_imagem) no-repeat, você pode modificar e colocar a imagem que mais lhe agrada. Veja um exemplo clicando aqui.

Você pode colocar a cor que quiser nas bordas das imagens, bastando para isso, alterar os códigos refentes as mesmas. Se você não sabe qual é o código da cor, clique aqui.

É isso.

Imagem: Revolução Digital

6 comentários:

  1. Me ajudou muito, obrigada!

    ResponderExcluir
  2. @kiki, fico feliz que tenha ajudado. Volte sempre. Será sempre bem vinda.

    Grande abraço!

    ResponderExcluir
  3. Oii.. Eu queria deixar somente alguumas imagens com borda...
    .. Nao queria todas as imagens com/sem borda..
    Queria personalizar: Quais imagens tem borda e quais nao tem..

    Obrigado

    ResponderExcluir
  4. Adorei seu blog. Ótimas dicas e td muito bem explicado. Parabéns! Me ajudou bastante...obrigada ;)

    ResponderExcluir
  5. Já Coloquei lá no Meu Blog.
    Tá Muito Bacana.
    Ei, Isso pode Deixar a Página mais Pesada?

    ResponderExcluir
  6. Obrigado, me ajudou muito também, o efeito é muito legal mesmo, as imagens ficou super legais, vlw!

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.