Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 77.335 ]

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

Efeitos de fogo no Linux

Instalando e configurando GeForce 6200 AGP no Linux

O mundo dominado por nerds!

BrasilLinux DosVox - Linux para deficientes visuais

Leitura recomendada

Arch Linux - Limpeza de pacotes

Servidor Apache2 + MySQL + PHP5 + PHPMyAdmin (Ubuntu)

Quebrando senha do usuário root (Debian e derivados)

Bioinformática - Montagem de genoma com AMOS

Virtualização com KVM no Red Hat

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

LazyDocker – Interface de Usuário em Tempo Real para o Docker

Instalando COSMIC no Linux Mint

Turbinando o Linux Mint: o poder das Nemo Actions

Inteligência Artificial no desenvolvimento de software: quando começar a usar?

Executar Scripts Remotamente

Dicas

[Resolvido] Algo deu errado ao abrir seu perfil

Usando o VNSTAT para medir o seu consumo de internet

Habilitando clipboard manager no ambiente COSMIC

A compatibilidade do LibreOffice com o Microsoft Office

Colocando hotcorner no COSMIC para exibir "workspaces"

Tópicos

initrams (2)

Quando vocês pararam de testar distros? (7)

Quais licenças open source têm valor jurídico? (7)

Não estou conseguindo fazer funcionar meu Postfix na versão 2.4 no Deb... (1)

Bloquear milhões de IPs (6)

Top 10 do mês

Scripts

[C/C++] hexfile - conversor de binario/hexadecimal

[Shell Script] clean_server.sh - Script para limpar o servidor

[Shell Script] Instalação remota de pacotes

[Shell Script] Script para Teste de Rede

[Shell Script] Script que sincroniza a mensagem de cópia de pendrive com o processo real

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: