Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 76.230 ]

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

Instalando e configurando GeForce 6200 AGP no Linux

O mundo dominado por nerds!

Efeitos de fogo no Linux

Renomeie vários arquivos com o Thunar

Leitura recomendada

Bloqueio de Ultrasurf usando apenas Iptables

Instalação do Slackware por um diretório

Instação do layer7 no Debian Lenny

Usando tty para logar no ambiente gráfico de outro usuário

Administração de usuários no Linux

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Compartilhando a tela do Computador no Celular via Deskreen

Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota

Configuração para desligamento automatizado de Computadores em um Ambiente Comercial

O mínimo que você precisa saber sobre o terminal (parte 2)

O mínimo que você precisa saber sobre o terminal (parte 1)

Dicas

Como renomear arquivos de letras maiúsculas para minúsculas

Imprimindo no formato livreto no Linux

Vim - incrementando números em substituição

Efeito "livro" em arquivos PDF

Como resolver o erro no CUPS: Unable to get list of printer drivers

Tópicos

Não to conseguindo resolver este problemas ao instalar o playonelinux (1)

Excluir banco de dados no xampp (1)

phpmyadmin não abre no xampp (2)

Ubuntu não sai som (0)

KeepOS Não consigo usar o comando sudo. (4)

Top 10 do mês

Scripts

[Python] Automação de scan de vulnerabilidades

[Python] Script para analise de superficie de ataque

[Shell Script] Novo script para redimensionar, rotacionar, converter e espelhar arquivos de imagem

[Shell Script] Iniciador de DOOM (DSDA-DOOM, Doom Retro ou Woof!)

[Shell Script] Script para adicionar bordas às imagens de uma pasta

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: