Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 51.145 ]

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

2 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

BrasilLinux DosVox - Linux para deficientes visuais

O mundo dominado por nerds!

Renomeie vários arquivos com o Thunar

Efeitos de fogo no Linux

Instalando e configurando GeForce 6200 AGP no Linux

Leitura recomendada

Projeto vídeo aula de Linux no Windows para download

Duzeru - Uma distro que nem DistroWatch conhece, ainda!

Conteúdos para BSD e FreeBSD

Comprei um computador com Linux, o que faço?

Instalando impressoras LEXMARK

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Instalando Adicionais para Convidados para VirtualBox no Debian, Linux Mint e Ubuntu

Rundeck - Um Poderoso Agendador de Tarefas

Principais Comandos Básicos do Docker-CE

MultiCD - Diversas Distribuições no mesmo DVD/Pendrive

Instalando Nextcloud Server no Fedora 31

Dicas

Instalando o Etcher no LMDE 4 Debbie

Ajuste de Brilho de Tela não Funciona no Linux Mint 19.3 Cinnamon - [Resolvido]

O Que Fazer Após Instalar o LMDE 4 Debbie

Usando o Play with Docker

Como Habilitar Facilmente Shell Script WEB no Linux Mint - Servidor Apache

Tópicos

Instalar impressora (2)

Linux Mint com problemas (5)

Preciso trocar o meu Linux por motivo de trabalho (7)

Erro dependencia do Instalação Packet Tracer 7.3 no Ubuntu 20.04 (2)

Netbook [RESOLVIDO] (14)

Top 10 do mês

Scripts

[Shell Script] Backup de Roteadores e Switches

[Shell Script] imdb-cli - consultar filmes, séries e atores pelo site IMDB no terminal

[Python] Validador e gerador de CPF em Python

[Shell Script] ipshow - exibir informações de sua rede

[Shell Script] sys_info - exibe o status do sistema

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:    Dicas-L  ·  Diolinux  ·  SoftwareLivre.org  ·  UnderLinux  ·  Blog do Edivaldo  ·  Sempre Update