Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 67.915 ]

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

Efeitos de fogo no Linux

BrasilLinux DosVox - Linux para deficientes visuais

O mundo dominado por nerds!

Renomeie vários arquivos com o Thunar

Instalando e configurando GeForce 6200 AGP no Linux

Leitura recomendada

Instalando ícones Faenza no Mageia 4 MATE

Instalando o Tasty Menu no ArchLinux

Servidor DHCPD no Fedora 21

Tutorial - Virtual Network User Mode Linux

Wireless: Ubuntu 7.04 com Realtek 8185

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner

Destaques

Artigos

Rodando um aplicativo em modo Kiosk no Ubuntu Linux 20.04

Instalação do Gentoo em HD Externo para dual boot com Windows

Instalação do OCS Inventory (última versão, 2.9.2 - 2022) no Debian 11

VOIP - Interceptando tráfego de pacotes

Sistemas de proteção de acesso a dados do seu HD, será efetivo?

Dicas

Arduino IDE não reconhece portas USB no Ubuntu 22.04

Passando parâmetros do cliente SSH para o GIT

Auto indentar linhas selecionadas no Vim

Som estourado ou falhando na Steam com Proton

Habilitando a compilação JIT (Just In Time) para o PHP8 no Ubuntu

Tópicos

Contar numero de arquivos que tem em um diretório específico (4)

Como mover apenas *arquivos* (2)

O quão código fechado é o windows? (0)

LINUX MINT SEM SOM! JÁ TENTEI DE TUDO! SOCORRO! (8)

erro ao atualizar pacote de atualizaçao (0)

Top 10 do mês

Scripts

[Python] Cup - um gerenciador de notas simples

[Javascript] Gerador de números para Mega-Sena

[Python] Chatroom Server em Python

[Python] Chatroom Cliente em Python

[Python] Netcat feito em Python

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: