Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 62.125 ]

Blog: http://www.rockemetaldownload.blogspot.com

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

Renomeie vários arquivos com o Thunar

Instalando e configurando GeForce 6200 AGP no Linux

BrasilLinux DosVox - Linux para deficientes visuais

Efeitos de fogo no Linux

O mundo dominado por nerds!

Leitura recomendada

Epsxe de forma simples

Coisas para fazer após instalar Linux Mint 13

Vídeo-aulas básicas do Ubuntu 9.10

Restringindo permissões nas configurações de suas estações Windows XP

Adicionado servidores no CruxPorts4Slackware

Comentários

Nenhum comentário foi encontrado.

Patrocínio

Site hospedado pelo provedor RedeHost.

Artigos

A poderosa nuvem: Intel® DevCloud com GPU Iris Xe Max!

Como executar tarefas a cada 5, 10 ou 15 minutos

Desenhando fácil um pinguim no Inkscape

Instalar e utilizar o FFmpeg no Ubuntu

Configurar um servidor FTP com o vsFTPd no Raspberry Pi

Dicas

Netdata no RockyLinux

Resolução da tela mudando sozinha [Resolvido]

Tux Games: jogos para seus filhos pequenos

Deepin 20.2 e uso do OpenVPN3

Instalando Docker-CE no RockyLinux

Tópicos

Extrair informações do "sbopkg -s" para o Zenity (0)

habilitar o SWAT no Slackware (0)

O meu Linux mint não instala (2)

Bluetooth desligando sozinho economia energia ubuntu (1)

Error loading media file couldn't be played UBUNTU 21.04 (0)

Top 10 do mês

Xerxes
1° lugar - 66.813 pts
Fábio Berbert de Paula
2° lugar - 56.336 pts
Clodoaldo Santos
3° lugar - 48.937 pts
Diego Mendes Rodrigues
4° lugar - 27.370 pts
Daniel Lara Souza
5° lugar - 23.166 pts
Mauricio Ferrari
6° lugar - 19.596 pts
Mauriciodez
7° lugar - 19.078 pts
Lisandro Guerra
8° lugar - 17.368 pts
Robson Fernando Gomes
9° lugar - 15.094 pts
Alberto Federman Neto.
10° lugar - 13.931 pts

Scripts

[Tcl/Tk] Servidor web pequeno e simples em TCL

[Shell Script] Font Installer v1.0 - Instalação de Fontes no Sistema

[Python] Alterar LED do teclado

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

[Shell Script] ison - testar conectividade da máquina