:: Tutorial de E-mails ::

Texto Sombra- Variações

Vimos como conseguir um efeito de texto que aparece com sombra.

Agora veremos algumas variações possíveis. (Você pode criar muitas variações, alterando as cores, o tipo, o tamanho, o estilo da fonte...)

Para conseguir um efeito como neste exemplo, faça o seguinte:

1. Abra uma nova mensagem

2. Clique na aba "Origem"

3. Cole o seguinte código, substituindo o texto que está marcado em vermelho.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tutorial de E-mails - lili http://www.ilove.com.br/lili </TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<STYLE>
body { background:#ffffff; font-family:Arial; }
div { position:absolute; }
</STYLE>

<STYLE>
.shade1 { top:+5; left:+5; color:#000000; }
.fill1 { top:0; left:0; color:#cc0000; }
</STYLE>

<DIV class=shade1>
<CENTER>
<H1>Tutorial de E-mails</H1></CENTER></DIV>
<DIV class=fill1>
<CENTER>
<H1>Tutorial de E-mails</H1></CENTER></DIV><BR><BR>

</BODY></HTML>

Veja outro exemplo:

Para conseguir esse efeito, faça o seguinte:

1. Abra uma nova mensagem

2. Clique na aba "Origem"

3. Cole o seguinte código, substituindo o texto que está marcado em vermelho.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tutorial de E-mails - lili http://www.ilove.com.br/lili</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<STYLE>
body { background:#ffffff; font-family:Comic Sans MS; }
div { position:absolute; }
</STYLE>

<STYLE>
.light2 { top:-1; left:-2; color:#ffffff; }
.shade2 { top:+1; left:+2; color:#000000; }
.fill2 { top:0; left:0; color:#93979D; } </STYLE>

<DIV class=light2>
<CENTER>
<H1>Tutorial de E-mails Lili</H1></CENTER></DIV>
<DIV class=shade2>
<CENTER>
<H1>Tutorial de E-mails Lili</H1></CENTER></DIV>
<DIV class=fill2>
<CENTER>
<H1>Tutorial de E-mails Lili</H1></CENTER></DIV><BR></BODY></HTML>

Mais um exemplo.

Para conseguir um efeito como o exemplo acima:

1. Abra uma nova mensagem

2. Clique na aba "Origem"

3. Cole o seguinte código, substituindo o texto que está marcado em vermelho.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tutorial de E-mails - lili http://www.ilove.com.br/lili</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<STYLE>
body { background:#ffffff; font-family:Comic Sans MS; }
div { position:absolute; }
</STYLE>

<STYLE>
.light4 { top:-2; left:-2; color:#A900E1; }
.shade4 { top:+2; left:+2; color:#A900E1; }
.fill4 { top:0; left:0; color:#D58CF0; } </STYLE>

<DIV class=Example4>
<DIV class=light4>
<CENTER>
<H1>Tutorial de E-mails - Lili</H1></CENTER></DIV>
<DIV class=shade4>
<CENTER>
<H1>Tutorial de E-mails - Lili</H1></CENTER></DIV>
<DIV class=fill4>
<CENTER>
<H1>Tutorial de E-mails - Lili</H1></CENTER></DIV></DIV></BODY></HTML>

Último exemplo.

Para conseguir um efeito como neste último exemplo:

1. Abra uma nova mensagem

2. Clique na aba "Origem"

3. Cole o seguinte código, substituindo o texto que está marcado em vermelho.

<HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<TITLE>Tutorial de E-mails - Lili http://www.ilove.com.br/lili</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<STYLE>
body { background:#ffffff; font-family:Comic Sans MS; }
div { position:absolute; }
</STYLE>

<STYLE>
.light4 { top:-2; left:-2; color:#FF8000; }
.shade4 { top:+2; left:+2; color:#FF8000; }
.fill4 { top:0; left:0; color:#050787; } </STYLE>

Lembre-se de que você pode criar inúmeras variações a partir dos exemplos propostos.

(Dica adaptada por Lilian Russo)

Fonte: Dynamic Drive


	.