|
Para colocar uma
moldura colorida na mensagem como a que está neste
modelo
proceda assim:
1 - Abra uma nova mensagem.
2 - Clique
na aba "Origem", na parte inferior da sua mensagem. Se ela não
estiver visível, vá em "Exibir" e selecione "Editar código
fonte".
3 - A Origem da sua mensagem deve estar
assim:
<!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.6000.16587" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY
bgColor=#ffffff>
<DIV> </DIV></BODY></HTML>
4
- Está vendo os dois tags STYLE marcados em cor diferente
acima?
Delete essa linha <STYLE></STYLE> (pode
deletar sem medo!... mas só essa linha, tá?)
Neste mesmo
lugar copie e cole o código abaixo:
<STYLE>BODY {
BORDER-RIGHT:
#0094ff 15px ridge; BORDER-LEFT: #0094ff 15px ridge; BORDER-TOP:
#0094ff 15px ridge; BORDER-BOTTOM: #0094ff 15px
ridge
}
</STYLE>
A Origem deve ter ficado
assim:
<!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.6000.16587" name=GENERATOR>
<STYLE>BODY
{
BORDER-RIGHT: #0094ff 15px ridge; BORDER-LEFT: #0094ff 15px
ridge; BORDER-TOP: #0094ff 15px ridge; BORDER-BOTTOM: #0094ff 15px
ridge
}
</STYLE>
</HEAD>
<BODY
bgColor=#ffffff>
<DIV> </DIV></BODY></HTML>
Vamos
entender os significados
BORDER-RIGHT: #0094ff 15px ridge =
Esta é a borda direita, cor azul e largura de 15
px
BORDER-LEFT: #0094ff 15px ridge = Esta é a borda esquerda,
cor azul e largura de 15 px
BORDER-TOP: #0094ff 15px ridge =
Esta é a borda superior, cor azul e largura de 15
px
BORDER-BOTTOM: #0094ff 15px ridge = Esta é a borda
inferior, cor azul e largura de 15 px
Se quiser mudar a borda
para cor preta por exemplo é só trocar o #0094ff para #000000
Se quiser mudar a largura é só mudar o valor 15px para outro
número
Se quiser usar espessuras diferentes para as bordas
é só colocar números diferentes em cada um delas, onde está o número
15 (veja o modelo 2 desta lição).
Se quiser aplicar
cores diferentes em cada uma das bordas pode
também.
Observação: os códigos hexadecimais das cores você
encontrará na Tabela de Cores que está na
parte de Material de Apoio. Poderá também escolher alguma daquelas
do anexo 01 (cubos de cores).
Complementação teórica dessa
Lição:
No código acima escolhemos o estilo "ridge", mas você
pode usar outros estilos da moldura. Onde estiver a palavra "ridge"
experimente trocar pelas seguintes
palavras:
double
groove
inset
outset
solid
Veja AQUI os
diferentes estilos de moldura e o respectivo código HTML.
Teste
cada uma das variações de estilo (uma de cada vez) e veja a
alteração que ocorreu na moldura original que você colocou. E,
finalmente, troque de novo para ridge.
Observações
Finais.
a) Não esqueça o sinal # em frente ao código
hexadecimal da cor
b) Um erro comum das pessoas que iniciam
no uso da borda colorida é a duplicidade do tag STYLE, ou seja, elas
colocam assim:
<STYLE>BODY {
BORDER-RIGHT:
#0094ff 15px ridge; BORDER-LEFT: #0094ff 15px ridge; BORDER-TOP:
#0094ff 15px ridge; BORDER-BOTTOM: #0094ff 15px ridge
}
</STYLE>
</STYLE>
Está
vendo a duplicidade (repetição) do tag STYLE em cor amarela?
c) Já sei que alguém vai perguntar:
"ô tia.. por que a moldura colorida não ficou exatamente com a
cor que escolhi? Ficou mais escura..."
Resposta: depende
do estilo que você tiver aplicado. Os estilos ridge, inset, outset
têm o objetivo de dar um efeito tridimensional, por isso eles usam
um ressalto (sombra) para dar idéia de perspectiva e a cor não fica
exatamente igual a que você escolheu. Fica mais escura.
No modelo 1 experimente trocar o estilo ridge para solid e terá a
mesma cor que escolheu.
Os estilos double, dashed e dotted só se aplicam ao caso de molduras
de tabelas. Caso use esses estilos na moldura da mensagem as bordas
serão visualizadas como o estilo solid.
Essa lição é apenas para estudo e entendimento do código. A lição a
ser apresentada à lista é a de número 12. |
