Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 77.611 ]

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

Efeitos de fogo no Linux

Renomeie vários arquivos com o Thunar

O mundo dominado por nerds!

Instalando e configurando GeForce 6200 AGP no Linux

BrasilLinux DosVox - Linux para deficientes visuais

Leitura recomendada

aMSN - Instalação no Fedora 17 e Linux Mint 13

Gerenciar pacotes em alto nível no Debian

Configurando a placa de vídeo ATI Radeon HD 2400 XT no Ubuntu e Debian

Script pessoal para uso em firmware de access point para conexão automática de PPPOE

Existe uma distribuição Linux melhor? Como escolher?

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Criptografando sua Home com Gocryptfs para tristeza do meliante

A Involução do Linux e as Lambanças Desnecessárias desde o seu Lançamento

O Journal no Linux para a guarda e consulta de logs do sistema

A evolução do Linux e as mudanças que se fazem necessárias desde o seu lançamento

Solid RELAÇÃO COM GOF

Dicas

Nelogica disponibiliza nova versão que permite operação sem instalar o software no seu Pc - Profit WEB

Discos que não instalam o sistema por erro MBR/GPT no Linux

Hospedagem de Mangás com Kavita e Docker para Acesso Remoto via Tailscale

Aplicar tema e ícones do Ubuntu Cinnamon no Arch Linux sem AUR

Sway no Arch Linux: configuração Inicial sem enrolação

Tópicos

Dual boot. (0)

Instalação do driver Epson L3150 [RESOLVIDO] (5)

Continuando meus tópicos anteriores (7)

Configurar cloudflare via terminal (1)

Abrir uma Url Windows/Wininet pelo Ubuntu em C++ (1)

Top 10 do mês

Scripts

[Shell Script] Flatctl

[Shell Script] yad-clamav

[Shell Script] imageDownloader

[Shell Script] Flatpak manager

[Shell Script] Renomador em lote feito em Zenity

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: