Borda nas imagens usando CSS e HTML

Publicado por Cristiano Verissimo em 22/05/2010

[ Hits: 48.748 ]

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

1 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

Instalando e configurando GeForce 6200 AGP no Linux

Efeitos de fogo no Linux

Renomeie vários arquivos com o Thunar

O mundo dominado por nerds!

BrasilLinux DosVox - Linux para deficientes visuais

Leitura recomendada

Instalação de interface gráfica no Debian 6

Como fazer seu próprio Debian Live USB Linux

Colocar atalhos na área de trabalho do Ubuntu

Previsão do tempo no modo texto

Usando o Linux com o driver VESA

  

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

Soluções para Acesso Remoto Seguro com SSH

Software Manivela VS Software Modinha

RapidScan - Multi-Tool WEB Vulnerability Scanner

Introdução ao OpenLDAP com o JXplorer

Virtual Host no CentOS 7

Dicas

Não consegue se registrar no Redhat [Resolvido]

Ativando SSH no Raspberrypi no Sistema Operacional Raspbian (sem trocas de cabos)

ISO do Debian com Firmware NonFree

Instalando Suporte ao Flatpak no Slackware 14.2

Como posso começar a programar?

Tópicos

Failed execute default (Input/output error) Pt.BR (0)

Instalação de um SO em uma máquina que possui Debian (0)

[AJUDA] - alfabeto codificado (1)

Seleção de Windows Manager [RESOLVIDO] (4)

Erro em struct (1)

Top 10 do mês

Scripts

[Shell Script] Instalação do LAMP no Linux Ubuntu

[Shell Script] Gerenciamento de software e hardware de desktop

[Shell Script] Previsão do tempo em cores no terminal

[Shell Script] Atualizar Sistema - Ubuntu

[Python] Expressão regular com input STDIN

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