Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 77.542 ]

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

Instalando e configurando GeForce 6200 AGP no Linux

Efeitos de fogo no Linux

BrasilLinux DosVox - Linux para deficientes visuais

O mundo dominado por nerds!

Renomeie vários arquivos com o Thunar

Leitura recomendada

Como conquistar a LPI 1

LDAP - Conceitos iniciais

Configuração do Bind no Fedora 10

Triggers para utilização de recursos do PostGIS

Instalação e configuração do Asterisk 1.4.21 para o uso com SoftPhones no Debian Etch e Lenny

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Faça suas próprias atualizações de pacotes/programas no Void Linux e torne-se um Contribuidor

Como rodar o Folding@home no Linux

Criando um painel de controle (Dashboard) para seu servidor com o Homepage

O Abismo entre o Código e o Chão: Saltos Tecnológicos e a Exclusão Estrutural no Brasil

Instalar e Configurar a santíssima trindade (PAP) no Void Linux

Dicas

Pisando no acelerador do Linux Mint: Kernel XanMod, zRAM e Ajustes de Swap

Como compilar kernel no Linux Mint

Lançamento do Brutal DOOM test 6

Consertando o erro no Brave de webgl

Solução para ter de volta as bordas e barra de títulos das janelas em zenity no Debian 13.x

Tópicos

Inserir uma URL num arquvo pelo Ubuntu (CLIPPER) (0)

initrams (6)

VMWare Player não conecta na rede nem consigo intercambiar arquivos (1)

Ativação de som 5.1 e nvidia (1)

Qual melhor distro para esse notebook? (6)

Top 10 do mês

Scripts

[Shell Script] imageDownloader

[Shell Script] Flatpak manager

[Shell Script] Renomador em lote feito em Zenity

[C/C++] Jogo do Labirinto no Terminal

[Shell Script] Status do teclado em qualquer ambiente gráfico com system tray no Linux

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: