⇐ Clique aqui para expandir o post. ⇒

quarta-feira, julho 20, 2005

Barra de rolagem colorida no Internet Explorer

Atualizado dia 02/07/2014.

Com CSS é possível personalizar as cores da barra de rolagem da sua página para que ela aparereça colorida no Internet Explorer 5.5 ou superior. Com este exemplo fica fácil saber como configurar sua barra de rolagem para que combine com as cores de seu template.

Você pode definir uma cor única base para a barra de rolagem para que ela apareça no modelo padrão do Windows:

Se você gostou do modelo padrão, mas quer mudar apenas alguns detalhes como a cor da seta e a cor do fundo, por exemplo, você pode fazê-lo. Exemplo:

Criei alguns modelos de barras de rolagem coloridas com duas cores. Vale lembrar que você pode substituir o "white" por outra cor clara e o "black" por outra cor escura para obter os mesmos efeitos (como "aqua" e "blue", "pink" e "purple", "lime" e "green", etc.).

No Internet Explorer 11 o código foi simplificado:

* {scrollbar-track-color:white; /* cor de fundo da barra de rolagem */ scrollbar-face-color:tan; /* cor da parte que rola */ scrollbar-arrow-color:indianred; /* cor da seta */ scrollbar-shadow-color:peru; /* cor da borda */}

Confira também o post CSS: barra de rolagem colorida no Google Chrome.

Até mais!

Pix meutedio arroba mail ponto com

4 comentários:

  1. Olá Helen,

    Estava procurando códigos p/ barras de rolagem e achei seu site c/ várias opções. Só que não sei bem se é o blogger (blogspot) que não aceita mudar a barra padrão do browser, mas não está dando certo... e eu queria muito mesmo fazer essa alteração.
    Talvez eu ñ esteja sabendo o local certo de inserir o código. Se puder me ajudar, serei muito grata.
    Qualquer o end. do meu blog: www.arqalcionecant.blogspot.com, mas não tenho espaço pra coment. então, pode me enviar uma msg em "contato".

    Muito obrigada pela atenção!

    ResponderExcluir
  2. Alcione, não consegui achar seu blog… O endereço está errado e seu perfil está bloqueado. =(

    ResponderExcluir
  3. @Alcione, você tem razão: não funciona mais no body do Blogger. Você poderá usar em outros elementos, como div e textarea.

    ResponderExcluir
  4. Olá estou fazendo o Html pro meu blog novo...a imagm do lay tem o tamanho exato e não era para aparecer aquelas barras de rolagem da direita e embaixo e,na realidade,elas não estavam aparecendo.Ocaso é que meu lay é feito com barras de rolagem nos post e perfil e eu estava tentando deixar apaenas a arrow da barra visivel,mas não consigo,quando eu coloco transparent ela fica branca e agora do nada apareceu essas duas barras de rolagem do lado em embaixo...
    Oque vc acha que eu devo fazer?

    PS.:Meu e-mail é tha.barreto@Hotmail.com

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.