Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 29.371 ]

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

0 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

Instalando e configurando GeForce 6200 AGP no Linux

O mundo dominado por nerds!

Renomeie vários arquivos com o Thunar

Leitura recomendada

Ubuntu - Guia do iniciante

Firebird 1.5 32 bits no Debian Squeeze 64 bits

Calculando dígito verificador do CT-e (reconhecimento de trânsito)

Samba PDC + Autenticando Windows 7 + Adicionando usuários

Instalando o Grads no Fedora Core 6

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor HostGator.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Programas em Modo Texto (on Shell)

Alterando o forward do SSH após conexão

Comando: journalctl - Monitoramento de LOGs

GRIVE - Google Drive Linux (Grátis)

Bioinformática - Instalação do SNAP workbench

Dicas

Conky iniciando e fechando [Slackware]

Pendrive que não é reconhecido, nem formata? Truque para... RESOLVER!

Configurando o libinput na unha

Instalando Etcher no Ubuntu 16.04 LTS

Dica para automatizar suas tarefas diárias [Iniciante]

Viva o Android

8 jogos pagos que estão grátis, incluindo o famoso Detetive!

Crie seu próprio pacote de ícones

Ativando o modo "on-the-go" no Android

Conheça o "Netflix" grátis dos animes para Android

Relógio do Android travando [resolvido]

Tópicos

Erro ao instalar qualquer pacote (20)

Achei o Deepin mais rapido que o Mint XFCE e MATE (4)

Como fasso pra instalar Netflix e Stremio no Kali ? (7)

Erro que aparece na inicialização (0)

Particao bloqueada apos instalar Parrot 3 (Lithium) (2)

Top 10 do mês

Scripts

[Shell Script] Instalando o SIESTA no Linux automaticamente

[Python] Git clone simplificado

[C/C++] Classe para manipulação e conversão de datas para std::string em C++

[Shell Script] Firewall simples, com opções de redirecionamento

[Python] Compressão de série numérica em Python

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:




Visite também:    Viva o Android  ·  BR-Linux.org  ·  Dicas-L  ·  Diolinux  ·  SoftwareLivre.org  ·  UnderLinux  ·  Blog do Edivaldo  ·  Sempre Update