:: Tutorial de E-mails ::

Curso de Formatação Avançado- Lição 15

Imagem com efeito chroma

O filtro chroma é interessante porque faz com que uma cor específica da imagem em formato jpg fique transparente. Dependendo do trabalho que estamos fazendo, esse filtro pode se tornar útil, neutralizando a cor de fundo de uma imagem simulando uma imagem GIF de fundo transparente.

O parâmetro color define uma cor do código RGB que sofrerá o efeito de transparência.

O filtro não funcionará se a cor selecionada para o efeito não existir na figura e funcionará "parcialmente" se a figura tiver outras variações, por menores que sejam, de nuances. Por exemplo, há imagens em jpg que não estão apenas com a cor branca no fundo, muito embora, muitas vezes, pareça ser uma cor única.É comum encontrarmos imagens com um fundo branco, mas com pequenas variações de tom ao redor da figura central (geralmente resultado de alguma sombra que foi aplicada ou de alguma máscara). É importante escolher uma imagem com um tom único de fundo para que o filtro seja bem evidente, ou usar um papel de fundo com o tom diferente que está na imagem. (Pode-se usar qualquer programinha de capturar cores para isto).

Veja o código:

style="FILTER: chroma(color=#ffffff); HEIGHT: 1px"><IMG alt=""
hspace=0
src="endereço de uma imagem com fundo branco"

Se você quiser usar uma imagem em jpg com uma outra cor de fundo que queira deixar transparente,

pegue o código da cor do fundo e indique-o na parte que deixei assinalada em vermelho.

Agora é hora de você aproveitar este filtro e fazer experiências com algumas imagens que tenham um fundo com uma cor uniforme.

Se você quiser criar um e-mail que tenha tabela e uma imagem com efeito chroma, faça o seguinte:

1. Escolha uma imagem em jpg que tenha um fundo branco ou de uma outra cor, desde que uma cor sólida.

2.Abra uma nova mensagem.

3. Clique em "Origem" e apague tudo o que aí estiver escrito.

3. Cole, então, o seguinte código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tutorial de e-mails - Lili Russo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>BODY {
BORDER-RIGHT: #d1aca7 5px double; BORDER-TOP: #d1aca7 5px double; SCROLLBAR-FACE-COLOR: #dec5c0; SCROLLBAR-HIGHLIGHT-COLOR: #d1aca7; BORDER-LEFT: #d1aca7 5px double; SCROLLBAR-SHADOW-COLOR: #dec5c0; SCROLLBAR-3DLIGHT-COLOR: #d1aca7; SCROLLBAR-ARROW-COLOR: #d1aca7; BORDER-BOTTOM: #d1aca7 5px double; SCROLLBAR-DARKSHADOW-COLOR: #dec5c0; SCROLLBAR-BASE-COLOR: #d1aca7
}
.TAB1 {
BORDER-RIGHT: #d1aca7 4px dotted; BORDER-TOP: #d1aca7 4px dotted; BORDER-LEFT: #d1aca7 4px dotted; BORDER-BOTTOM: #d1aca7 4px dotted
}
.TD1 {
BORDER-RIGHT: #d1aca7 8px double; BORDER-TOP: #d1aca7 8px double; BORDER-LEFT: #d1aca7 8px double; BORDER-BOTTOM: #d1aca7 8px double; bgcolor: #9992A4
}
.DV {
FONT-SIZE: 14pt; COLOR: #c2938b; FONT-FAMILY: Comic Sans MS
}
</STYLE>

<META content="MSHTML 6.00.6000.16608" name=GENERATOR></HEAD>
<BODY bgProperties=fixed bgColor=#f3e9e0 background="endereço do back">
<DIV><FONT face="Comic Sans MS" size=2>align=baseline border=0></FONT></DIV>
<DIV style="FONT: 10pt arial">
<DIV><FONT face="Comic Sans MS"></FONT> </DIV></DIV>
<DIV><BR></DIV>
<DIV> </DIV><IMG id=table_back1
style="LEFT: -1800px; POSITION: absolute; TOP: -1800px" height=150
src="back da tabela" width=150> <IMG id=table_back2
style="LEFT: -1800px; POSITION: absolute; TOP: -1800px" height=150
src="back1 da tabela" width=150>
<TABLE class=TAB1 id=table1 cellSpacing=10 cellPadding=35 align=center>
<TBODY>
<TR>
<TD>
<TABLE class=TD1 id=table2 cellSpacing=5 cellPadding=5 align=center>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#ffffff); HEIGHT: 1px"><IMG alt=""
hspace=0
src="endereço de uma imagem com fundo branco"
border=0></TD>
<TR></TR>
<TR>
<TD class=TD1 id=table3 align=middle>
<DIV class=DV style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 300px">Dê
um duplo clique e escreva seu
texto</DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<SCRIPT language=vbscript>
'==============================
'script by Lili Russo; may 2007
'please leave my name in the script
'==============================
table1.background=table_back1.src
table2.background=table_back2.src

window.status="....Tutorial de e-mails - Lili Russo"
x=0
y=0
SetInterval "scrollback", 64

Sub scrollback()
x=x+1
y=y+1
document.body.style.backgroundposition=x&" "&y
End Sub

</SCRIPT>
</SCRIPT></BODY></HTML>

Observe que a cor a ser aplicada para o chroma deve ser a mesma cor do fundo da imagem. Caso contrário, ele não surtirá nenhum efeito.

Coloquei aqui este script porque já me deparei com situações em que precisava deixar uma imagem jpg com um efeito de transparência e este filtro foi muito útil.

Tarefa: Crie um e-mail usando o script do efeito chroma. Insira uma música, escreva um pequeno texto e envie ao grupo. Insira a imagem original na qual você aplicou o efeito chroma como anexo.

Importante: Insira seu cartão de visitas!

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

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

Lição elaborada por Lilian Russo


	.