Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 76.841 ]

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!

Renomeie vários arquivos com o Thunar

Efeitos de fogo no Linux

BrasilLinux DosVox - Linux para deficientes visuais

Instalando e configurando GeForce 6200 AGP no Linux

Leitura recomendada

Permissões desnecessárias em aplicativos do Android

Ubuntu 12.04 com Mate 1.4.0

Como Limpar o Histórico do Terminal e Remover o Comando Usado

Instalando e Configurando o No-ip no Debian Etch 4.0

CFTV completo no Debian Sarge 3.1

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Automatizando digitação de códigos 2FA no browser

Resolver problemas de Internet

Como compartilhar a tela do Ubuntu com uma Smart TV (LG, Samsung, etc.)

Descritores de Arquivos e Swappiness

tux-gpt - Assistente de IA para o Terminal

Dicas

Como converter imagens PNG/JPEG para SVG em linha de comando

Fez porcaria no teu repositório Git? Aprenda a restaurar uma versão anterior do seu código!

Restaurando Fontes de Download do Hydra no Linux

Atualizando "na marra" o YT-DLP quando começa a dar erro de downloads

Como instalar o WPS com interface e corretor ortográfico em PT-BR no Arch Linux

Tópicos

./netconfig.sh: not found (0)

Erro na atualização dos pacotes (2)

Cliente para Celular Spark (3)

TFTP (2)

[AJUDA] Problemas ao atualizar BIOS da Gigabyte B550M K rev. 1.1 — “RO... (3)

Top 10 do mês

Scripts

[Shell Script] Instalador de Hotspot Linux Debian (SysV)

[Shell Script] Script para verificar o Status da bateria

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

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

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

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: