Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 28.324 ]

Blog: http://www.rockemetaldownload.blogspot.com

0 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

Efeitos de fogo no Linux

Instalando e configurando GeForce 6200 AGP no Linux

O mundo dominado por nerds!

BrasilLinux DosVox - Linux para deficientes visuais

Renomeie vários arquivos com o Thunar

Leitura recomendada

Como instalar o Insigne Momentum 5.5

Lista de sites de jogos para Linux

Fail2ban - Aprendendo a instalar e configurar

Instalando agente do Zabbix no Windows

Veja como anda se comportando seu PC

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor HostGator.
Linux banner
Linux banner
Linux banner

Artigos

[Estudo de caso] Ferramentas Open Source tem sido um caso de sucesso na Biotecnologia e Bioinformática

Integração de servidores Linux com Active Directory

Libertarianismo e semelhanças com Software Livre

Recuperando senhas de e-mails esquecidas usadas no Claws-Mail

LAMP no Debian 8 (Apache 2, PHP 5 e MariaDB)

Dicas

Instalando Google Chrome e Skype no Debian 9 Stretch

TimeShift no Debian 9

Corrigir erro de DNS no NetworkManager

Impressora Canon G3100 no Arch Linux

Material de Estudo LPIC-1 - Prova 1 (LPI-101, LX0-103) e Prova 2 (LPI-102, LX0-104)

Viva o Android

Obtendo permissão de superusuario no LineageOS

3 jogos grátis por tempo limitado!

Mais jogos pagos que estão grátis? Toma!

Instalando a Custom ROM LineageOS (Android 7.1) no Moto G1 (XT1033)

Total Phone Cleaner de R$ 9,14 por R$ 0,00 neste link

Tópicos

Alternativa para o Adobe Digital Editions (0)

Erro de apt-get [RESOLVIDO] (6)

Uma comparação entre Radioamadores e Linuxes -- Das amizades do meu av... (0)

Lançamento - Debian 9 (233)

Como deixar o Debian 9 com a interface gráfica do Pantheon? (1)

Top 10 do mês

Scripts

[Shell Script] Pós-instalação do Ubuntu

[Shell Script] Instalador de pacotes com dialog atualizado no Github

[Python] Organizador de números simples

[Shell Script] Update browscap

[Shell Script] runit-fstab-generator

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:




Visite também:    Viva o Android  ·  BR-Linux.org  ·  Dicas-L  ·  Diolinux  ·  SoftwareLivre.org  ·  UnderLinux  ·  Blog do Edivaldo  ·  Sempre Update