Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 77.288 ]

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

Renomeie vários arquivos com o Thunar

Efeitos de fogo no Linux

O mundo dominado por nerds!

BrasilLinux DosVox - Linux para deficientes visuais

Leitura recomendada

Conheça o Desktop 3D do Ubuntu 7.04 (Feisty Fawn)

VirtualBox 4.3 no Debian 8 (Jessie) 64bits

Instalando Ubuntu 7.10 x86 em um Dell Optiplex 320

Instalação e Configurando Apache2 PostgreSQL e phpPgAdmin no Debian Lenny

Entre no universo Linux com Zenwalk!

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Cirurgia para acelerar o openSUSE em HD externo via USB

Void Server como Domain Control

Modo Simples de Baixar e Usar o bash-completion

Instalar/habilitar o Linux nativo dentro do Windows com WSL (Windows Subsystem for Linux - Subsistema do Windows para Linux)

Monitorando o Preço do Bitcoin ou sua Cripto Favorita em Tempo Real com um Widget Flutuante

Dicas

Jogar games da Battle.net no Linux com Faugus Launcher

Como fazer a Instalação de aplicativos para acesso remoto ao Linux

Como fazer a instalação do Samba

Criação de usuários, alteração de senhas, exclusão de contas e gerenciamento de grupos no Linux e no Samba

Como fazer a conversão binária e aplicar as restrições no Linux

Tópicos

Conky, alerta de temperatura alta (0)

Assisti Avatar 3: Fogo e Cinzas (0)

Duas Pasta Pessoal Aparecendo no Ubuntu 24.04.3 LTS (40)

Pfsense inacessivel após um periodo de tempo (2)

Estudos (1)

Top 10 do mês

Scripts

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

[Python] Cadastro de Distros

[Shell Script] Pós Instalação Fedora 43+

[Shell Script] Task Manager para Terminal

[Shell Script] Atualizar Debian versão 2.0

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: