Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 59.851 ]

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

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

Biblioteca digital (desenvolvida em software livre)

Dicas para iniciar sua vida no mundo GNU/Linux

Resolver problema de vídeo na instalação do Gentoo pelo Live CD

Dicas para iniciantes em Linux

Comandos básicos do sistema GNU/Linux

Comentários

Nenhum comentário foi encontrado.

Patrocínio

Site hospedado pelo provedor RedeHost.

Destaques

IMPOSTO DE RENDA 2021 [RESOLVIDO] (11)

Navegador e Bloqueador, qual a solução que vcs usam? (36)

Curso Gratuito de segurança cibernética (5)

Artigos

Criando um Arch Linux de bolso a partir de qualquer distribuição

Instale uma distro dentro de outra

Montando HD, Pendrive ou Pasta de Rede para Gravações de Ligações do Elastix e Módulo de Call Center

Slackware para Desktop ou Notebook em 2021

Gentoo Linux vale a pena?

Dicas

Corrigir os erros "5: Input/output error" ou "cache file is corrupted" no Ubuntu

Instalando Driver NVIDIA no Debian 10 Buster para Iniciantes

Obtendo a soma do tamanho os arquivos listados com "du"

Corrigindo o tema QT em ambiente GTK+ no Debian 11

Rodando o ManageIQ via podman

Tópicos

Lançado Ubuntu 21.04 (3)

Como instalar arquivo .EXE no Linux? Aplicativo do Windows no Linux? (4)

Conexão estranha sempre presente no comando netstat (2)

Erro ao atualizar samba 4.13.7 para 4.14.3 (2)

Linux mint, Manjaro, MX Linux, Elementary OS, Raspbian ou Ubuntu? (Opi... (6)

Top 10 do mês

Xerxes
1° lugar - 92.580 pts
Fábio Berbert de Paula
2° lugar - 69.975 pts
Clodoaldo Santos
3° lugar - 45.654 pts
Mauricio Ferrari
4° lugar - 33.503 pts
Daniel Lara Souza
5° lugar - 29.650 pts
Diego Mendes Rodrigues
6° lugar - 27.851 pts
Lisandro Guerra
7° lugar - 19.556 pts
Alberto Federman Neto.
8° lugar - 18.697 pts
Robson Fernando Gomes
9° lugar - 17.614 pts
edps
10° lugar - 17.302 pts

Scripts

[Python] Calculadora em Python

[Shell Script] Renomear arquivos de fontes ttf e otf

[Shell Script] ebook-cli - gerencia livros digitais entre PC e leitores ebooks

[Shell Script] Uebevert - All in 1

[Tcl/Tk] Mostrar conexões de rede ativas