:: Tutorial de E-mails ::

Moldura

Uma moldura dá um bonito acabamento às mensagens e é bem simples de ser feita.

Veja o exemplo:

O código que iremos digitar em "Origem", antes de <BODY, para fazer a moldura é:

----------------------------------------------------------------------------------------------------------------------------------------------------------------
<STYLE>
BODY {BORDER-BOTTOM: #000000 10px ridge; BORDER-LEFT: #000000 10px ridge; BORDER-RIGHT: #000000 10px ridge; BORDER-TOP: #000000 10px ridge}
</STYLE>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Você pode fazer várias alterações, usar cores e tamanhos diferentes nas bordas.

Basta entender o significado dos itens que compõem este código. (Vou usar exemplos diferentes, para mostrar algumas variações possíveis, tá bom?)

BORDER-BOTTOM: #000000 10px ridge - borda inferior, cor preta e largura de 10px (você pode alterar a cor, mudando o código #000000 e o tamanho alterando o número de pixels 10px )

BORDER-LEFT: #ff0000 12px ridge - borda esquerda, cor vermelha, com 12 px de largura.

BORDER-RIGHT: #ffff80 8px ridge - borda direita, cor amarela, com 8 px de largura.

BORDER-TOP: #0080ff 20px ridge - borda superior, cor azul, com 20 px de largura.

Você pode conseguir diversas variações alterando os tamanhos e cores.

Vou colocar aqui um código completo. Se você preferir usá-lo, basta deletar tudo o que está escrito na aba "Origem" e colar este código. (Pode alterar as cores e tamanhos como quiser).

----------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2600.0" name=GENERATOR>
<STYLE>
BODY {BORDER-BOTTOM: #00ccff 10px ridge; BORDER-LEFT: #00ccff 10px ridge; BORDER-RIGHT: #00ccff 10px ridge; BORDER-TOP: #00ccff 10px ridge}
</STYLE>
</HEAD>
<BODY bgColor=#ffddcc>
<DIV><FONT face="Comic Sans MS" color=#004080>Escrever seu texto
aqui</FONT></DIV></BODY></HTML>

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Vamos entender um pouquinho mais o código:

----------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2600.0" name=GENERATOR>
<STYLE>
BODY {BORDER-BOTTOM: #00ccff 10px ridge; BORDER-LEFT: #00ccff 10px ridge; BORDER-RIGHT: #00ccff 10px ridge; BORDER-TOP: #00ccff 10px ridge}(cor da moldura azul com 10 px de largura e no "formato" ridge)
</STYLE>
</HEAD>
<BODY bgColor=#ffddcc> (cor do fundo do papel)
<DIV><FONT face="Comic Sans MS" color=#004080>Escrever seu texto aqui</FONT>(cor da fonte)
</DIV></BODY></HTML>

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Pronto! Experimente e veja os resultados!

Se quiser encontrar variações para as molduras, consulte esta dica.

(Dica elaborada por Lilian Russo)