Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 77.020 ]

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

BrasilLinux DosVox - Linux para deficientes visuais

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

Leitura recomendada

O porquê de se usar software livre

Tutorial completo sobre modem HSP56 no Conectiva 10

Transferência de arquivos de forma segura de Windows para Linux

Kali Linux XFCE com tela preta ao fechar tampa de notebook [Resolvido]

Conheça o Desktop 3D do Ubuntu 7.04 (Feisty Fawn)

  

Comentários

Nenhum coment�rio foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Servidor de Backup com Ubuntu Server 24.04 LTS, RAID e Duplicati (Dell PowerEdge T420)

Visualizar câmeras IP ONVIF no Linux sem necessidade de instalar aplicativos

Atualizar Debian Online de uma Versão para outra

Máquina perereca - até onde é possível o uso de Linux?

Mitigação - O que é e quando é "seguro" desabilitar

Dicas

Dica para encontrar diversos jogos Indies criativos

Por que eu amo Linux?

Instalando Discord no Debian 13

Instalar driver Nvidia no Debian 13

Redimensionando, espelhando, convertendo e rotacionando imagens com script

Tópicos

Software livre - será que eu estou tão errado assim? (18)

Pendrive (5)

Falha add cluster Proxmox (2 nós) (0)

O que você está ouvindo agora? [2] (218)

Dificuldade com Ocs 2.12.3 no Debian 13 com Apache2 - Can't load ... (4)

Top 10 do mês

Scripts

[Shell Script] Script ligar-scrolllock

[Shell Script] Como ver/ouvir vídeo/áudio via Terminal de modo prático

[Shell Script] Criar Script para apagar determinados arquivos

[Shell Script] inSANE - Script para usar Scanner

[Shell Script] Instalador do emulador de joystick Xbox para joystick generico para PC, PS2, PS3 (Debian e Derivados

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: