Curso de Formatação Avançado- Lição
7
Texto com sombra - conhecendo melhor o
filtro dropshadow
Considero interessante usar este recurso de texto com sombra, quando
queremos Para conseguir um efeito de letras que aparecem sombreadas.
Vamos entender melhor um pouquinho do filtro que permite o sombreado
do texto. Quem trabalha com o PSP, já conhece o termo Drop
Shadow (que é a sombra que aplicamos em imagens e textos).
Observe 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">
<META content="MSHTML 6.00.6000.16608" name=GENERATOR></HEAD>
<BODY bgColor=#b2a27c>
<DIV> </DIV>
<DIV><BR></DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV align=center>
<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: 16pt; FILTER: progid:DXImageTransform.Microsoft.Shadow(color='#2b2923',
Direction=135, Strength=10); WIDTH: 300px; COLOR: #e8d7ae; FONT-FAMILY:
Verdana; TEXT-ALIGN: center">
<DIV align=center>Escreva seu texto aqui</DIV>
<DIV align=center> </DIV>
<DIV align=center>Dê um duplo clique</DIV>
<DIV align=center><BR>Tutorial de E-mails</DIV>
<DIV align=center> </DIV>
<DIV align=center>Lili Russo</DIV>
<DIV align=left> </DIV>
<DIV align=center><IMG alt="" hspace=0
src="endereço de uma imagem pequena que ficará
com sombra" align=baseline
border=0></DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<SCRIPT language=JavaScript>
<!--
ScrollChars = 4; // chars scrolled per time period
function SetupTicker() {
// add space to the left of the message
msg = " ~ Tutorial de E-mails ~ Lili Russo ~ "
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end -->
</SCRIPT>
</BODY></HTML>
O Dropshadow é um filtro que cria uma sombra em um texto
ou em uma imagem. Este filtro tem como base o seguinte código:
FILTER: progid:DXImageTransform.Microsoft.Shadow(color='#000000',
Direction=135, Strength=12)
"Traduzindo"...
color - é a cor da sombra, no caso, #000000 = cor preta
Direction=135 - é o ângulo da sombra você pode
variá-lo de 0 a 360°
Strength=12 - é a amplitude da sombra em projeção
A cor da fonte está definida aqui:
<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: 18pt; FILTER: progid:DXImageTransform.Microsoft.Shadow(color='#00000',
Direction=135, Strength=12); WIDTH: 300px; COLOR: #ffffff; FONT-FAMILY:
Verdana; TEXT-ALIGN: center">
Obs.: Aqui
você encontra um outro código para criar um texto com
sombra e
aqui
uma outra variação
Sempre é bom conhecer outras formas de realizar um novo
trabalho.
Gosto de lembrar sempre que a beleza de um trabalho é resultado
de testes que fazemos e de combinações harmoniosas
que fazemos. Portanto, uma boa escolha de cores, de imagens, de
formas, de tamanhos é que determina um bom resultado de nosso
trabalho.
Vamos à nossa tarefa:
1. Abra uma nova mensagem
2. Clique na aba "Origem"
3. Cole 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">
<META content="MSHTML 6.00.6000.16608" name=GENERATOR></HEAD>
<BODY bgColor=#b2a27c>
<DIV> </DIV>
<DIV><BR></DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV align=center>
<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: 16pt; FILTER: progid:DXImageTransform.Microsoft.Shadow(color='#2b2923',
Direction=135, Strength=10); WIDTH: 300px; COLOR: #e8d7ae; FONT-FAMILY:
Verdana; TEXT-ALIGN: center">
<DIV align=center>Escreva seu texto aqui</DIV>
<DIV align=center> </DIV>
<DIV align=center>Dê um duplo clique</DIV>
<DIV align=center><BR>Tutorial de E-mails</DIV>
<DIV align=center> </DIV>
<DIV align=center>Lili Russo</DIV>
<DIV align=left> </DIV>
<DIV align=center><IMG alt="" hspace=0
src="endereço de uma imagem pequena que ficará
com sombra" align=baseline
border=0></DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<SCRIPT language=JavaScript>
<!--
ScrollChars = 4; // chars scrolled per time period
function SetupTicker() {
// add space to the left of the message
msg = " ~ Tutorial de E-mails ~ Lili Russo ~ "
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end -->
</SCRIPT>
</BODY></HTML>
4. Altere as cores do texto e da sombra. Altere estas cores no código,
pela aba "Origem". Escreva seu texto pela aba "Editar"
(Escolhi este código para a aula porque ele tem a vantagem
de você pode digitar seu texto pela própria aba "Editar")
4. Coloque uma moldura em sua mensagem, barra de rolagem colorida,
insira uma música e lembre-se de inserir uma imagem (deixei
indicado o lugar no código), pois do contrário, você
irá se deparar com aquele "X"
chatinho...
5. Insira uma música e envie para o grupo.
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
Lilian Russo - Todos os Direitos Reservados - ©2002/2008
|
