Curso de Formatação Super - Lição 2

Vários efeitos em um e-mail




Este script é muito rico em efeitos e o resultado é bastante interessante.

O que você poderá fazer para alterar o resultado final:

Há três "linhas" de 4px de largura e comprimento variável entre 550 e 600 px. O filtro, no caso, filtro wave dá o efeito de ondas nessas barrinhas laterais. Há também o filtro BasicImage Mirror que inverte as ondas. (As ondinhas da direita estão invertidas em relação às da esquerda).

Na imagem central foi aplicado o filtro de Transição Barn

progid:DXImageTransform.Microsoft.Barn(motion=in, orientation=horizontal, enabled=1)"

Podemos alterar o motion "in" para "out" e orientation=horizontal para vertical.


<HTML><HEAD><TITLE>::Tutorial de E-mail - Lili Russo::</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16640" name=GENERATOR>
<STYLE type=text/css>BODY {
BORDER-RIGHT: #a67fac 3px groove; BORDER-TOP: #a67fac 3px groove; MARGIN-TOP: 30px; SCROLLBAR-FACE-COLOR: #a67fac; FONT-SIZE: 12pt; SCROLLBAR-HIGHLIGHT-COLOR: #cac7b6; MARGIN-LEFT: 10px; BORDER-LEFT: #a67fac 3px groove; SCROLLBAR-SHADOW-COLOR: #cac7b6; COLOR: #aaccee; SCROLLBAR-3DLIGHT-COLOR: #a67fac; MARGIN-RIGHT: 10px; SCROLLBAR-ARROW-COLOR: #cac7b6; SCROLLBAR-TRACK-COLOR: #a67fac; BORDER-BOTTOM: #a67fac 3px groove; FONT-FAMILY: Verdana; SCROLLBAR-DARKSHADOW-COLOR: #a67fac; TEXT-ALIGN: center
}
.texto {
BORDER-RIGHT: #aaccee 4px double; PADDING-RIGHT: 5px; BORDER-TOP: #aaccee 4px double; PADDING-LEFT: 5px; SCROLLBAR-FACE-COLOR: #a67fac; FONT-WEIGHT: bold; FONT-SIZE: 10pt; PADDING-BOTTOM: 5px; SCROLLBAR-HIGHLIGHT-COLOR: #aaccee; OVERFLOW: auto; BORDER-LEFT: #aaccee 4px double; WIDTH: 400px; SCROLLBAR-SHADOW-COLOR: #aaccee; COLOR: #cac7b6; SCROLLBAR-3DLIGHT-COLOR: #a67fac; SCROLLBAR-ARROW-COLOR: #aaccee; PADDING-TOP: 5px; SCROLLBAR-TRACK-COLOR: #a67fac; BORDER-BOTTOM: #aaccee 4px double; FONT-FAMILY: Comic Sans MS; SCROLLBAR-DARKSHADOW-COLOR: #a67fac; HEIGHT: 180px; TEXT-ALIGN: center
}
.offscrn {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
</STYLE>
</HEAD>
<BODY bgColor=#a67fac>
<DIV><BR></DIV><BGSOUND balance=0 src="musica" volume=0 loop=infinite>
<DIV></DIV><!-- back e linhas em movimento --><IMG class=offscrn id=hof
src="C:\Documents and Settings\Lilian\Meus documentos\Minhas imagens\backs\brilho\angelttile2.jpg">
<!-- tabela imagem de fundo --><IMG class=offscrn id=rid
src="C:\Documents and Settings\Lilian\Meus documentos\Minhas imagens\backs\desenhinhos\angelbg3.gif">

<TABLE id=tab1
style="BORDER-RIGHT: #aaccee 12px double; BORDER-TOP: #aaccee 12px double; BORDER-LEFT: #aaccee 12px double; BORDER-BOTTOM: #aaccee 12px double"
cellSpacing=30 align=center bgColor=#ffccdd>
<TBODY>
<TR>
<TD align=middle width=125 rowSpan=2>
<DIV style="WIDTH: 100px; POSITION: relative; HEIGHT: 600px">
<DIV id=lili1
style="FONT-SIZE: 1px; LEFT: 0px; WIDTH: 4px; POSITION: absolute; TOP: 25px; HEIGHT: 550px"></DIV>
<DIV id=lili2
style="FONT-SIZE: 1px; LEFT: 25px; WIDTH: 4px; POSITION: absolute; TOP: 0px; HEIGHT: 600px"></DIV>
<DIV id=lili3
style="FONT-SIZE: 1px; LEFT: 50px; WIDTH: 4px; POSITION: absolute; TOP: 25px; HEIGHT: 550px"></DIV></DIV></TD>
<TD align=middle><!-- imagem com filtro - escolha alguma imagem com medidas em torno de 400 X 400 --><IMG
id=pic1 style="VISIBILITY: hidden"
src="C:\Documents and Settings\Lilian\Meus documentos\Minhas imagens\1_lili\aulas\regina_helena.jpg"></TD>
<TD align=middle width=125 rowSpan=2>
<DIV style="WIDTH: 100px; POSITION: relative; HEIGHT: 600px">
<DIV id=lili4
style="FONT-SIZE: 1px; RIGHT: 0px; WIDTH: 4px; POSITION: absolute; TOP: 25px; HEIGHT: 550px"></DIV>
<DIV id=lili5
style="FONT-SIZE: 1px; RIGHT: 25px; WIDTH: 4px; POSITION: absolute; TOP: 0px; HEIGHT: 600px"></DIV>
<DIV id=lili6
style="FONT-SIZE: 1px; RIGHT: 50px; WIDTH: 4px; POSITION: absolute; TOP: 25px; HEIGHT: 550px"></DIV></DIV></TD></TR>
<TR>
<TD align=middle>
<DIV class=texto>
<DIV>Texto aqui</DIV></DIV></TD></TR></TBODY></TABLE>
<SCRIPT language=vbscript>
'------------------------------------------
'please leave all these lines in
'Script by Lili Russo
'http://ilove.terra.com.br/lili
'------------------------------------------
window.status=" ::Tutorial de E-mails - Lili Russo:: "

Dim l, r
l=l
r=r

Sub Window_onload()
document.body.style.backgroundImage="URL("&hof.src&")"
tab1.style.backgroundImage="URL("&rid.src&")"
lili1.style.backgroundImage="URL("&hof.src&")"
lili1.style.filter="FILTER: progid:DXImageTransform.Microsoft.Wave(Add='false', LightStrength=5, Phase=0, Strength=6, Freq=15)"
lili2.style.backgroundImage="URL("&hof.src&")"
lili2.style.filter="FILTER: progid:DXImageTransform.Microsoft.Wave(Add='false', LightStrength=5, Phase=0, Strength=6, Freq=15)"
lili3.style.backgroundImage="URL("&hof.src&")"
lili3.style.filter="FILTER: progid:DXImageTransform.Microsoft.Wave(Add='false', LightStrength=5, Phase=0, Strength=6, Freq=15)"
lili4.style.backgroundImage="URL("&hof.src&")"
lili4.style.filter="FILTER: progid:DXImageTransform.Microsoft.Wave(Add='false', LightStrength=5, Phase=0, Strength=6, Freq=15)progid:DXImageTransform.Microsoft.BasicImage(Mirror=1)"
lili5.style.backgroundImage="URL("&hof.src&")"
lili5.style.filter="FILTER: progid:DXImageTransform.Microsoft.Wave(Add='false', LightStrength=5, Phase=0, Strength=6, Freq=15)progid:DXImageTransform.Microsoft.BasicImage(Mirror=1)"
lili6.style.backgroundImage="URL("&hof.src&")"
lili6.style.filter="FILTER: progid:DXImageTransform.Microsoft.Wave(Add='false', LightStrength=5, Phase=0, Strength=6, Freq=15)progid:DXImageTransform.Microsoft.BasicImage(Mirror=1)"
pic1.style.filter="progid:DXImageTransform.Microsoft.Barn(motion=out, orientation=vertical, enabled=2)"
lilirusso
End Sub

Sub lilirusso()
cleartimeout
pic1.filters(0).Apply()
pic1.style.visibility="visible"
pic1.filters(0).Play(4)
settimeout "scrollit", 4100
End Sub

sub scrollit()
setinterval "scroll", 64
End Sub

Sub scroll()
l=l+1
document.body.style.backgroundposition=-j&" "&j
lili1.style.backgroundposition=l&" "&l
lili2.style.backgroundposition=l&" "&l
lili3.style.backgroundposition=l&" "&l
lili4.style.backgroundposition=-l&" "&l
lili5.style.backgroundposition=-l&" "&l
lili6.style.backgroundposition=-l&" "&l
End Sub

</SCRIPT>

<DIV></DIV></BODY></HTML>



IMPORTANTE
Todas
as tarefas do Nível Super devem trazer um anexo com o script redigido no bloco de notas. Sempre use barra de rolagem colorida, moldura na mensagem, música, um texto (pode ser um pensamento, um poema, uma reflexão, uma história, algumas palavras redigidas por você...) e uma imagenzinha pequenininha no final do e-mail.
Sempre que possível, os créditos de imagens, de músicas, de scripts e de textos devem ser apresentados também.

O cartão de visitas é fundamental porque estaremos enviando as lições via Yahoo e, sem o cartão de visitas, a formatação se perde!

Endereço do grupo: tutorial_emails@yahoogrupos.com.br

Lembre-se de indicar no campo Assunto: Nome do aluno, Nível e Número e título da lição. Caso a lição tenha sido refeita, inclua a palavra "refeita".

Lição elaborada por Lilian Russo

 

Lilian Russo - Todos os Direitos Reservados - ©2002/2008




.