Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 76.306 ]

3 0

 

Denuncie   Favoritos   Indicar   Impressora

Borda nas imagens usando CSS e HTML



É muito simples colocar bordas nas suas imagens usando CSS e HTML, eu já visualizei muitas imagens na net que eles editam a imagem para poder colocar a borda, na minha opinião é mais prático e fácil com código.

1. Coloque o seguinte código no seu CSS:

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
padding: 3px;
text-align: center;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignleft{
float: left;
margin: 1px 4px 0 0;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignright{
float: right;
margin: 1px 0 0 4px;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}
.alignnone{
margin: 1px 4px 0 0;
padding: 3px;
background-color: #ffffff;
border: 1px solid #dbdbdb;
}

2. No seu HTML coloque:

Para imagem centralizada:

<img src="http://www.suaimagem.jpg" class="aligncenter" alt=""/>

Para imagem alinhada à esquerda:

<img src="http://www.suaimagem.jpg" class="alignleft" alt=""/>

Para imagem alinhada à direita:

<img src="http://www.suaimagem.jpg" class="alignright" alt=""/>

Para imagem sem alinhamento:

<img src="http://www.suaimagem.jpg" class="alignnone" alt=""/>

3. Às vezes, para que a borda funcione corretamente no Internet Explorer, você tem que substituir o <html> e o <head> por:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

Configurando a seu gosto:

.alignnone{
margin: 1px 4px 0 0;
padding: 3px; /* Aqui Você pode aumentar ou diminuir o tamanho da borda pode colocar 3px, 5px, 6px etc */
background-color: #ffffff; /* Aqui você pode trocar a cor */
border: 1px solid #dbdbdb;
}

Um exemplo:

<img src="http://rhodya.99k.org/vox.jpg" class="alignnone" alt="" width="200" height="150" />

Sem borda:
Com borda:
Fácil, fácil, não?!?!?

Outras dicas deste autor

O mundo dominado por nerds!

Instalando e configurando GeForce 6200 AGP no Linux

Efeitos de fogo no Linux

Renomeie vários arquivos com o Thunar

BrasilLinux DosVox - Linux para deficientes visuais

Leitura recomendada

Resolver problema de vídeo na instalação do Gentoo pelo Live CD

Alternando entre dois diretórios eficientemente

Utilizando o recurso inteligente de formatação de recuo de texto no LibreOffice

chattr - Como trancar um arquivo

Backups no Zimbra

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Enviar mensagem ao usuário trabalhando com as opções do php.ini

Meu Fork do Plugin de Integração do CVS para o KDevelop

Compartilhando a tela do Computador no Celular via Deskreen

Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota

Configuração para desligamento automatizado de Computadores em um Ambiente Comercial

Dicas

Compartilhamento de Rede com samba em modo Público/Anônimo de forma simples, rápido e fácil

Cups: Mapear/listar todas as impressoras de outro Servidor CUPS de forma rápida e fácil

Criando uma VPC na AWS via CLI

Multifuncional HP imprime mas não digitaliza

Dica básica para escrever um Artigo.

Tópicos

xubuntu sem sons de eventos (3)

Erro ao iniciar serviço samba4 como novo dc em um ambiente com ad (9)

Dificuldade para renderizar vídeo no kdenlive (5)

tem problema em instalar o Chrome no tails? (7)

Copiar uma pasta 100% fiel a original? (5)

Top 10 do mês

Scripts

[C/C++] reverse shell na marra!

[Outros] Dicas e truques Matematica Básica

[C/C++] criptografia de modo simples

[C/C++] intdb - gerador de wordlist numerica

[C/C++] genpass - gerador de senhas seguras

A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.

Site hospedado por: