Blogmania: Retirar a borda azul das imagens

Imagem: Phoenix Arts

Nível: Iniciante

As imagens geralmente apresentam uma borda azul a qual pode ser retirada de três formas diferentes.

1. Código para retirar o sublinhado dos links e a borda das imagens:

Copie e cole o código abaixo dentro da TAG <HEAD></HEAD>:

<style type="text/css">
A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {text-decoration:none}
a img {
border-width:0;
}
</style>

2. Código para retirar a borda das imagens no Blogger:

Copie e cole o código abaixo dentro da TAG <IMG> do seu link:

border="0" style='border: 0px; padding: 1px;'

3. Código para retirar a borda das imagens no Blogger:

Procure este trecho no código HTML do seu blogue na aba Layout, Editar HTML.

.post img {

margin-top:0;

margin-$endSide:0;

margin-bottom:5px;

margin-$startSide:0;

padding:4px;

border:1px solid $borderColor; }

Substitua o "1" em "border:1px solid" pelo 0. Observe:

.post img {

margin-top:0;

margin-$endSide:0;

margin-bottom:5px;

margin-$startSide:0;

padding:4px;

border:0px solid $borderColor;

}

Pronto! Salve as modificações e note que as bordas de todas as imagens dos artigos não existem mais.

Caso você não queira retirar a borda e sim customizá-la basta usar o elemento style.

Por exemplo:

style="border: medium dashed #FFOOOO"

>> medium é a largura (da mais fina a mais grossa, temos a thin, medium e thich)

>> dashed é o estilo (veja os valores permitidos abaixo)

>> #FFOOOO é a cor

Valores permitidos para border-style:

inherit= repete o valor do elemento superior (elemento-pai)

none= a borda não é renderizada em torno do elemento

dotted= a borda é formada por linhas pontilhadas

dashed= a borda é formada por uma série de tracinhos

solid= a borda é formada por uma linha contínua

inset= a borda está em 3D e dentro da superfície

outset= a borda está em 3D e saindo da superfície

double= a borda é desenhada por linhas duplas

Outros elementos igualmente importantes são o float (flutuação) que renderiza a imagem seguindo o fluxo do texto e position que define o posicionamento da imagem.

Valores permitidos para float: none (nenhum), left (à esquerda) e right (à direita)

Valores permitidos para position: static, relative, absolute, fixed

Comente este artigo

Postar um comentário

Importante!
1. Comente este artigo com OpenID para deixar sua URL.
2. Mensagem que contenha SPAM não será aprovada.
3. Faça comentários criativos, relevantes e inteligentes.
4. O comentário tem que ter alguma relação com o artigo.
5. Os avatares à direita são aleatórios!
É uma brincadeira, portanto leve na esportiva!
6. Quem não se comunica se trumbica.
7. Coloque a boca no trombone.
8. Pergunte, comente, opine!