Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 77.581 ]

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!

Instalando e configurando GeForce 6200 AGP no Linux

Efeitos de fogo no Linux

Renomeie vários arquivos com o Thunar

BrasilLinux DosVox - Linux para deficientes visuais

Leitura recomendada

Compactação e descompactação de arquivos (ambiente gráfico)

Criando teclas de atalho no Ubuntu 9.04

Bpython, uma interface ncurses para Python

Prompt colorido no Xubuntu 9.04

Mostrar a previsão do tempo com PHP

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Solid RELAÇÃO COM GOF

Maquina modesta - a vez dos navegadores ferrarem o usuario

Fscrypt: protegendo arquivos do seu usuário sem a lentidão padrão de criptograr o disco

Faça suas próprias atualizações de pacotes/programas no Void Linux e torne-se um Contribuidor

Como rodar o Folding@home no Linux

Dicas

Dock no Cinnamon

Dando uma turbinada no bash

Resolvendo o bloqueio do Módulo Warsaw no Arch Linux (Porta 30900)

Replicação SYSVOL no Samba 4 com Syncthing

Samba 4 com Replicação e LDAP Seguro (LDAPS/TLS)

Tópicos

Metafísica e espiritualidade funciona de verdade! Comprovação pessoal (14)

Warsaw não é reconhecido no Google Chrome 147.0.7727.55 (6)

Governo da França vai trocar Windows por Linux (8)

Bluetooth desconecta logo após conectar, ubuntu 25.10 (2)

Isso acontece quando tento ajudar alguém (2)

Top 10 do mês

Scripts

[Shell Script] yad-clamav

[Shell Script] imageDownloader

[Shell Script] Flatpak manager

[Shell Script] Renomador em lote feito em Zenity

[C/C++] Jogo do Labirinto no Terminal

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: