Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 76.496 ]

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!

Efeitos de fogo no Linux

BrasilLinux DosVox - Linux para deficientes visuais

Renomeie vários arquivos com o Thunar

Instalando e configurando GeForce 6200 AGP no Linux

Leitura recomendada

Web Linux Designers

Instalando codecs multimídia no Fedora 12 Constantine

"user parameter" no Zabbix - Configuração

Dual Boot Insigne Momentum + Windows 7

Como criar Discovery com Zabbix

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Passkeys: A Evolução da Autenticação Digital

Instalação de distro Linux em computadores, netbooks, etc, em rede com o Clonezilla

Título: Descobrindo o IP externo da VPN no Linux

Armazenando a senha de sua carteira Bitcoin de forma segura no Linux

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

Dicas

Instalando Brave Browser no Linux Mint 22

vídeo pra quem quer saber como funciona Proteção de Memória:

Encontre seus arquivos facilmente com o Drill

Mouse Logitech MX Ergo Advanced Wireless Trackball no Linux

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

Tópicos

VMs e Interfaces de Rede desapareceram (12)

Instalação do drive do adaptador wiffi (7)

Como abrir o pycharm no linux (1)

Sem som no pc [RESOLVIDO] (7)

Arch Linux - Guia para Iniciantes (3)

Top 10 do mês

Scripts

[Outros] Dicas e truques Matematica Básica

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

[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: