|
Barras de
rolagem coloridas
Barras
de rolagem podem exibir as cores que você escolher. Existem
diversos códigos para colorir as barras de rolagem e cada um deles
produz um efeito diferente.
Basta
você copiar/colar o código desejado na área <HEAD> do
código-fonte da sua página web ou de uma mensagem do Outlook
Express ou
ou entre as tags: <head></head>
e alterar
o código das cores (#000000) dos elementos que compõem a
barra.
As cores mais importantes são:
srollbar-face-color
(barra principal)
sroll-track-color (cor de fundo da barra)...
|
<style
TYPE="text/css">
<!--
body { scrollbar-face-color: #ad4110;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000; scrollbar-arrow-color:
#ffffff }
-->
</style>
|
Clique
AQUI e veja
uma Tabela de Cores com os respectivos códigos.
_________________________
1.
Código Simples:
|
<STYLE>BODY
{SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-BASE-COLOR: #000000}
</STYLE>
|
O que
significa cada comando:
SCROLLBAR-ARROW-COLOR:
#000000
é a cor da setinha.
SCROLLBAR-BASE-COLOR: #000000
é a cor da barra de rolagem propriamente dita.
Para
modifiar as cores e adequá-las ao layout da sua mensagem ou
página web, basta trocar o código #000000
pelo
código da cor desejada.
Este
código você pode observar aplicado na barra de rolagem desta
página - foi trocado apenas o código da cor em SCROLLBAR-BASE-COLOR:
#000000}
que
ficou assim:
<STYLE>BODY
{SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-BASE-COLOR: #FFE7E7}
</STYLE>
_____________________
2. Barra
de rolagem colorida com Efeito 3D
Código:
|
<STYLE type=text/css>BODY {
SCROLLBAR-FACE-COLOR: #336699; SCROLLBAR-HIGHLIGHT-COLOR:#FFCC33;
SCROLLBAR-SHADOW-COLOR: #FF9900; SCROLLBAR-3DLIGHT-COLOR: #FF9900;
SCROLLBAR-ARROW-COLOR: #E28F00; SCROLLBAR-TRACK-COLOR: #FFCC33;
SCROLLBAR-DARKSHADOW-COLOR: #FFCC33} </style>
|
O que
significa?
SCROLLBAR-FACE-COLOR:
é a cor da barra de rolagem em si. Este comando muda
apenas a cor da barra de rolagem (a parte que rola, que se
movimenta).
SCROLLBAR-HIGHLIGHT-COLOR: é a cor das linhas que contornam
o lado esquerdo da barra.
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.
____________
3. Barra
de rolagem colorida com efeitos:
|
<STYLE>BODY {
SCROLLBAR-FACE-COLOR: #dfb8d0; SCROLLBAR-HIGHLIGHT-COLOR: #e5a5d5; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #fce9fb; SCROLLBAR-TRACK-COLOR: #b484a3; SCROLLBAR-DARKSHADOW-COLOR: #fce9fb}</STYLE>
|
O que
significacada comando:
SCROLLBAR-FACE-COLOR:
é a cor da barra de rolagem em si, conforme explicado
acima. Trocando o código da cor, apenas a barra de rolagem é
afetada.
SCROLLBAR-HIGHLIGHT-COLOR: são as linhas do lado esquerdo
da barra. A mudança deste código de cor vai modificar a cor da
caixa de rolagem, as bordas da barra de rolagem e as bordas da
caixinha que contém a setinha.
SCROLLBAR-SHADOW-COLOR: acrescenta uma sombra à barra de
rolagem.
SCROLLBAR-3DLIGHT-COLOR: aplica efeito 3D à barra de
rolagem.
SCROLLBAR-ARROW-COLOR: é a cor da setinha.
SCROLLBAR-TRACK-COLOR: cor da barra fixa ou caixa de rolagem,
ou seja, a caixa de fundo sobre a qual a barra desliza.
SCROLLBAR-DARKSHADOW-COLOR: acentua a sombra da barra
de rolagem.
Geradores de Barras de Rolagem Coloridas
1.
Gerador de Barras de Rolagem Automático:
Acesse
o site e escolha as cores desejadas para cada elemento. Um
código é gerado automaticamente. Basta copiá-lo e colar no
código fonte da página web ou numa mensagem do OE.
2. Cool
Web Scrollbars 2.2
- FREE
Crie
barras de rolagem coloridas para serem usadas no seu website e
vistas no Internet Explorer. Fácil de usar e com uma boa
interface lhe permitirá escolher as cores e elementos fácilmente.
Os resultados são vistos em tempo real e o código gerado pode
ser copiado. Possui utilitário de instalação e desinstalação.Roda
em Windows 95, 98, NT, 2000, ME
Tutorial
elaborado por Angela M. P. Glavam
Direitos
reservados
|
