A barra de rolagem transparente fica muito bonita quando combinada à um belo background… Agora você irá aprender como deixar a barra de rolagem do seu blog ou site transparente.
Primeiro, é extremamente necessário uma perfeita organização da tabela que você quer que tenha a barra de rolagem transparente, por isso você terá que utilizar a tag <div>. É nela que ficará o conteúdo que terá a transparência.
Exemplo de uma <div>:
<div style="position: absolute; top: 0; left: 0; width: 582; height: 361; overflow: auto" style="FILTER: chroma (color=#FFFEFE)">
Textos e imagens aqui
</div>
Onde:
Position: Absolute – Se for absolute, significa que você poderá movê-la ao arrastá-la com o mouse.
Top - Distância entre a div e o topo da página
Left - Distância entre a div e o lado esquerdo (padrão) da página
Width - Largura da div
Height - Altura da div
Oveflow: auto - Significa que aparecerá a barra de rolagem apenas se necessário;
O mais importante para a barra de rolagem ficar transparente é esse código dentro da div:
style="FILTER: chroma (color=#FFFEFE)" - Onde FFFEFE é a cor que você quer que fique transparente. Para isso você tem que colocar a mesma cor escolhida para transparência na CSS (código que fica dentro da tag <head>) que é o responsável peles cores da barra de rolagem.
Exemplo de CSS:
{scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #FFFEFE;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #FFFEFE; }
Neste caso as partes da barra que eu escolhi para ficarem transparentes aqui são a "face-color" e "track-color", que são a principal e o fundo, respectivamente, pois são as mais importantes para um design bonito de barras de rolagem transparente.
As demais ficam à sua escolha a opção de cor. Caso queira dar uma olhada nas opções de cores, tem uma tabela de cores nesta seção de tutoriais, com todos os códigos referentes a cada cor.
Abaixo eu fiz um código-base para você dar inÃcio à sua página com rolagem transparente. Já pronta, basta alterar o conteúdo para a que mais lhe convir.
Não esqueça de alterar também a cor (color) em style="FILTER: chroma (color=#FFFEFE)" e também na sua CSS as partes que quer que fiquem transparentes, no caso, a "face-color" e a "track-color", lembrando que o certo é a mesma cor em ambas as partes, na color e na CSS.
<html>
<head>
<STYLE type="text/css">
<!– abaixo é a configuração do texto –>
P, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 10px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 12px;
}
<!– abaixo é a configuração do link –>
A, A:link{color:#F974BB; font-weight: bold; cursor: crosshair}
A:visited{color:#F974BB}
A:active{color:#ffeaf4}
a:hover {text-decoration: none; filter: shadow(Color=#ffffff, strength=1);
height:0px; cursor: crosshair; font-family: Verdana, Arial, Helvetica,
sans-serif;}
hr{width:100%;color:#4FC7FB;height:5;border:1px solid #1A348B; text-align:center}
<!– abaixo é a configuração da barra de rolagem –>
body {scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #FFFEFE;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #FFFEFE; }
</STYLE>
</head>
<body>
<!– INÃCIO – Tabela com Barra de Rolagem Transparente – www.cute-things.com –>
<div style="position: absolute; top: 0; left: 0; width: 324; height: 150;
overflow: auto" style="FILTER: chroma (color=#FFFEFE)">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="300" id="AutoNumber1" height="160">
<tr><td valign="top">
<!– INÃCIO – EDIÇÃO –>
Aqui você irá colocar o conteúdo que quer que apareça na sua tabela com barra de
rolagem transparente…
Não esqueça de alterar a cor <i>(color)</i> em style="FILTER: chroma (color=#FFFEFE)"
e também na sua CSS as partes que quer que fiquem transparentes, no caso, a
"face" e a "track", lembrando que o certo é a mesma cor em ambas as partes, na
color e na CSS.
<!– FIM – EDIÇÃO –>
</td></tr></table></div>
<!– FIM – Tabela com Barra de Rolagem Transparente – www.cute-things.com –>
</body>
</html>
Copie o código acima e edite como desejar.
OBS: A barra de rolagem transparente funciona no navegador Internet Explorer, mas não em outros navegadores como o Mozilla Firefox por exemplo.
Receba as atualizações do Cute Things em seu e-mail ou assine o Feed!
Polícia Federal - Agente Administrativo
