Busca avançada Meus favoritos Como criar site grátis em PHP, HTML, CSS, JS ...
Postes RECENTES
Categorias
Ultimos posts
- background-image css
- tooltip jquery
- editor de imagens online
- 60 belas texturas
- belas texturas gratis
- Calcular frete em ASP
- variaveis php existe
- redirecionar site php
- remover espaços de string
- gerador de layout css
- máscara javascript
- estrutura condicional
- teclado virtual
- crie imagem loading
- personalizar curso mouse
estilizando a barra de rolagem com css
Você capricha no layout do seu site, cria imagens bem bacanas, coloca sombras, efeitos e tudo mais que você imaginava, mas aquela barra de rolagem do navegador não esta incompatível com o layout do site e isso não te agrada, como resolver essa questão? Você deve esta achando que eu tenho a solução pra isso não é mesmo, não tenho não, mas o css tem, o nosso bom e velho css entra em ação mais uma vez.
Propriedades css para estilizar a barra de rolagem
Vamos conhecer as propriedades do css capazes de estilizar a barra de rolagem do navegador. Vou postar o código pronto e depois explico: <html>
<head>
<style type="text/css">
body {
scrollbar-arrow-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-highlight-color:#FF0000;
scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#0000FF;
scrollbar-darkshadow-color:#FFFF00;
scrollbar-track-color:#00FF00;
}
</style>
</head>
<body>
<p>Estou aprendendo como estilizar a barra de rolagem do navegador</p>
</body>
</html>
Descrição das propriedades css responsáveis por estilizar a barra de rolagem:
scrollbar-arrow-color - cor da setinha
scrollbar-3dlight-color - cor da base da borda da esquerda
scrollbar-highlight-color - cor da borda esquerda
scrollbar-face-color - cor da face da barra, parte móvel
scrollbar-shadow-color - cor da borda da direita
scrollbar-darkshadow-color - cor das bordas superiro e inferior
scrollbar-track-color - cor da barra, parte fixa sobre a qual a parte móvel desliza
Como uma palavra vale mais que mil palavras, veja essa imagem para reforçar o que acabamos de dizer.
IMPORTANTE: Essa técnica só funciona no Internet Explorer e não esta na relação das web standards, por esta razão não é interessante usá-la.
Espero que tenha tenham gostado, até a próxima.
MATERIAS RELACIONADAS
- gerador de layout css
- Banco de imagens gratis de alta resolução para uso comercial
- função para somar dias a uma data em php
- teclado virtual javascript
DEIXE SEU COMENTÁRIO
