|
O objetivo dessa Lição
é compreendermos os diversos códigos que podem ser aplicados à barra de rolagem.
Para tanto, vamos testar diferentes cores e entender onde as mesmas se
aplicam.
Veja aqui alguns
modelos de barra de rolagem colorida com o código completo.
1
- Abra uma nova mensagem.
2 - Clique na aba "Origem", na
parte inferior da sua mensagem.
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
- Delete a linha <STYLE></STYLE> e neste mesmo lugar
copie e cole o código que está abaixo:
<STYLE>BODY {
SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #000000
}
</STYLE>
OBS. Sempre que a sua barra de rolagem não
estiver visível, vá na aba "Editar" e dê vários "ENTER" até que ela
apareça.
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 {
SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #000000
}
</STYLE>
</HEAD>
<BODY
bgColor=#ffffff>
<DIV> </DIV></BODY></HTML>
Agora,
vamos entender os significados do código que foi aplicado na Origem
(acompanhe pela imagem também):
SCROLLBAR-FACE-COLOR: é a cor da barra de rolagem em si.
Aqui você muda a cor da barra de rolagem, sem incluir as bordas e as
setas.
SCROLLBAR-HIGHLIGHT-COLOR: é a cor das linhas que
contornam o lado esquerdo da barra. Na verdade, aqui você altera a
cor da caixa de rolagem, as bordas da barra e as bordas da caixinha
da seta.
SCROLLBAR-SHADOW-COLOR: aqui você aplica uma sombra
à barra de rolagem.
SCROLLBAR-3DLIGHT-COLOR: este estilo
aplica um efeito 3D à barra de
rolagem.
SCROLLBAR-ARROW-COLOR: refere-se à cor da
setinha.
SCROLLBAR-TRACK-COLOR: é a cor da barra que fica
fixa, chamada de caixa de rolagem. Aqui você altera, então a cor da
caixa de rolagem, ou seja, o caminho que a barra de rolagem
percorre.
SCROLLBAR-DARKSHADOW-COLOR: aplica uma sombra mais
acentuada à barra de rolagem.
Vamos testar cada uma das partes do código da barra de
rolagem?
Propositalmente o
código foi informado com apenas duas cores: branca (#FFFFFF) e preta
(#000000). Agora vamos usar a cor vermelha (#FF0000) e mudar cada
parte do código (uma de cada vez) para verificarmos onde essa nova
cor se aplicará. Depois disso, sabendo onde
cada cor se aplica, é só trocar de novo para cores que combinem
mais.
Outra sugestão: pegue na parte de Material de apoio o
programa scrollbar e brinque de colorir a barra de rolagem até ter
compreendido bem o código.
Nota. 1 - Podemos
usar o código completo incluindo o comando SCROLLBAR-BASE-COLOR.
Veja o modelo 3 desta lição.
2 - Não temos que
aplicar simultaneamente todos os códigos relativos da barra de
rolagem. O importante é compreender onde cada um deles se aplica e
testar os efeitos visuais que podemos obter fazendo as combinações
dos códigos e das cores.
Observe os modelos da lição e faça os seus próprios testes para ver
quais combinações gosta mais.
Essa lição é apenas para estudo e entendimento do código. A lição a
ser apresentada à lista é a de número 14. | 