Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 75.240 ]

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

O mundo dominado por nerds!

BrasilLinux DosVox - Linux para deficientes visuais

Instalando e configurando GeForce 6200 AGP no Linux

Efeitos de fogo no Linux

Renomeie vários arquivos com o Thunar

Leitura recomendada

Openfire Autenticando no Active Directory

OpenVPN autenticando no OpenLDAP via script

Como colocar informações do sistema (CPU, MEM, NET, UPTIME) na área de trabalho do Ubuntu 7.04

Rastreando seu computador com Python via e-mail

Instalando o AMSN 0.95 no Linux - Fácil e rápido

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Atualizar o macOS no Mac - Opencore Legacy Patcher

Crie alias para as tarefas que possuam longas linhas de comando - bash e zsh

Criando um gateway de internet com o Debian

Configuração básica do Conky para mostrar informações sobre a sua máquina no Desktop

Aprenda a criar músicas com Inteligência Artificial usando Suno AI

Dicas

Instalando e usando o Dconf Editor, o "regedit" para Linux

Como instalar o navegador TOR no seu Linux

Instalando Zoom Client no Ubuntu 24.04 LTS

Instalando Zoom Client no Fedora 40

Instalando Navegador Firefox no Debian 12

Tópicos

Encriptografa... as particoes com LUKS, o que poderia dar errado? (4)

É tão difícil assim nos ajudar a te ajudar? (22)

Manjaro Substituindo Ubuntu no Desktop (11)

HD SSD inacessível: scsi error badly formed scsi parameters (7)

Fones de ouvido no Linux (9)

Top 10 do mês

Scripts

[Shell Script] Ver TV e rádio online por shell script

[Shell Script] DriveTool.sh: um script para cópia rápida e segura de arquivos para unidades flash USB

[Python] Adicione a opção Redimensionar e rotacionar imagens ao Nautilus

[Shell Script] Script para desinstalar pacotes desnecessários no OpenSuse

[Shell Script] Script para criar certificados de forma automatizada no OpenVpn

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: