Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 77.465 ]

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

O mundo dominado por nerds!

Renomeie vários arquivos com o Thunar

BrasilLinux DosVox - Linux para deficientes visuais

Efeitos de fogo no Linux

Leitura recomendada

Automatizando monitor dual-head no Linux

Solução para a falta de codecs do Ubuntu (e mais)

Live CDs, uma boa sugestão para os iniciantes

Instalando Atheros AR5007EG no (K)Ubuntu/Debian sem complicações

Linux na IPTV do Brasil - difícil caminho

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

A combinação de WMs com compositores feitos por fora

Audacious, VLC e QMMP - que saudades do XMMS

SUNO OpenSource: Crie um servidor de gerador de música com IA

Instalação Completa e Configuração Básica do Void Linux

A Fundação da Confiança Digital: A Importância Estratégica de uma PKI CA na Segurança de Dados

Dicas

Instalar o Microsoft Teams no Ubuntu e Derivados

Melhores DNSs por Categoria

Script para configurar o DOOM Retro no Linux

Personalizando o terminal

Script para organizar janelas em cascata no KDE Plasma 6 (Wayland)

Tópicos

Erro ao baixar progamas no terminal (2)

Instalador não reconhece SSD Sata. (8)

Impressora hp 1132 (4)

Módulo de segurança warsaw CEF (1)

Mudança de Source do Xboxdrv (3)

Top 10 do mês

Scripts

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

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

[Shell Script] Zemblema

[Shell Script] Flatpak manager

[Outros] Script de limpeza, atualização e verificação de erros no Debian - v7

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: