Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 76.696 ]

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

Efeitos de fogo no Linux

O mundo dominado por nerds!

BrasilLinux DosVox - Linux para deficientes visuais

Renomeie vários arquivos com o Thunar

Leitura recomendada

Inkscape: Ajustando texto ao caminho

Atualizando Linux Mint 17 para Linux Mint 17.1

Utilizando o uShare como A/V media center

Slackware em modo texto - Apagão na tela durante inicialização

Criação de uma aplicação simples com PYRAMID e SQLALCHEMY

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Criar entrada (menuentry) ISO no Grub

Grande dificuldade tanto para rodar distros em modo LIVE como para instalar Linux em Sony Vaio PCG6131L / VPCEA24FM

Como gerar qualquer emoji ou símbolo unicode a partir do seu teclado

Instalar e Configurar o Slackware Linux em 2025

Como configurar os repositórios do apt no Debian 12 em 2025

Dicas

Instalar o VIM 9.1 no Debian 12

Como saber o range de um IP público?

Muitas dificuldades ao instalar distro Linux em Notebook Sony Vaio PCG-6131L (VPCEA24FM)

Slackpkg+ (Slackpkg Plus) está de volta!

Como dividir duas janelas igualmente e lado-a-lado na sua tela

Tópicos

Como redefinir o diretório Home? (4)

Problemas com adaptadores wifi no Zorin (1)

Controle de presença (2)

Ocomon 6.0.1 - Problemas ao editar configurações estendidas (7)

instalar o Linux em computadores Acer novos (7)

Top 10 do mês

Scripts

[C/C++] IPHunter - caçador de ip

[Shell Script] Script de Backup do Perfil dos Usuários do Sistema em Batch do Windows

[C/C++] Alucard - scan de redes defensivo

[Outros] Dicas e truques Matematica Básica

[C/C++] reverse shell na marra!

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: