• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

pebat

[CSS] Mudar cores da scroollbar

21 mensagens neste tópico

Nós ao fazermos páginas web e que ao fim de umas linhas de ficamos com scrollbar, este codigo serve para mudarmos a cor da scrollbar, para ficar mais adaptada ao nosso website.

body { 
      scrollbar-arrow-color: ffffff; 
      scrollbar-base-color:ffcc00;       scrollbar-dark-shadow-color: ffffff; 
      scrollbar-track-color: ffffff; 
      scrollbar-face-color: ffcc00; 
      scrollbar-shadow-color: ffffff; 
      scrollbar-highlight-color: ffcc00;       scrollbar-3d-light-color: ffffff; 
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

OLHA, muito fixe mesmo, não queres fazer um mini tutorial a partir disto? Era só preciso adicionar a lista de codigos para as cores e tava mais um tuto feito! :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Convém dizer que isso só funciona em Internet Explorer :P No Firefox não muda :confused: (pelo menos quando tive a testar não o fazia :D )

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

tb reparei k no firefox nao funcionou... vou tentar descubrir o pk kd tiver um cadinho de tempo volto a posta alguma coisa..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Válido apenas para IE.

scrollbar-track-color: cor de fundo da barra

scrollbar-face-color: cor da barra

scrollbar-arrow-color: cor das setas

scrollbar-3dlight-color: cor do efeito 3D

scrollbar-highlight-color: cor de seleção de barra

scrollbar-shadow-color: cor da sombra da barra

scrollbar-darkshadow-color: cor da "sombra escura" da barra

body {
scrollbar-face-color: #367CD2;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}

Códigos de cores:

AliceBlue  #F0F8FF   

AntiqueWhite  #FAEBD7   

Aqua  #00FFFF   

Aquamarine  #7FFFD4   

Azure  #F0FFFF   

Beige  #F5F5DC   

Bisque  #FFE4C4   

Black  #000000   

BlanchedAlmond  #FFEBCD   

Blue  #0000FF   

BlueViolet  #8A2BE2   

Brown  #A52A2A   

BurlyWood  #DEB887   

CadetBlue  #5F9EA0   

Chartreuse  #7FFF00   

Chocolate  #D2691E   

Coral  #FF7F50   

CornflowerBlue  #6495ED   

Cornsilk  #FFF8DC   

Crimson  #DC143C   

Cyan  #00FFFF   

DarkBlue  #00008B   

DarkCyan  #008B8B   

DarkGoldenRod  #B8860B   

DarkGray  #A9A9A9   

DarkGreen  #006400   

DarkKhaki  #BDB76B   

DarkMagenta  #8B008B   

DarkOliveGreen  #556B2F   

Darkorange  #FF8C00   

DarkOrchid  #9932CC   

DarkRed  #8B0000   

DarkSalmon  #E9967A   

DarkSeaGreen  #8FBC8F   

DarkSlateBlue  #483D8B   

DarkSlateGray  #2F4F4F   

DarkTurquoise  #00CED1   

DarkViolet  #9400D3   

DeepPink  #FF1493   

DeepSkyBlue  #00BFFF   

DimGray  #696969   

DodgerBlue  #1E90FF   

Feldspar  #D19275   

FireBrick  #B22222   

FloralWhite  #FFFAF0   

ForestGreen  #228B22   

Fuchsia  #FF00FF   

Gainsboro  #DCDCDC   

GhostWhite  #F8F8FF   

Gold  #FFD700   

GoldenRod  #DAA520   

Gray  #808080   

Green  #008000   

GreenYellow  #ADFF2F   

HoneyDew  #F0FFF0   

HotPink  #FF69B4   

IndianRed   #CD5C5C   

Indigo   #4B0082   

Ivory  #FFFFF0   

Khaki  #F0E68C   

Lavender  #E6E6FA   

LavenderBlush  #FFF0F5   

LawnGreen  #7CFC00   

LemonChiffon  #FFFACD   

LightBlue  #ADD8E6   

LightCoral  #F08080   

LightCyan  #E0FFFF   

LightGoldenRodYellow  #FAFAD2   

LightGrey  #D3D3D3   

LightGreen  #90EE90   

LightPink  #FFB6C1   

LightSalmon  #FFA07A   

LightSeaGreen  #20B2AA   

LightSkyBlue  #87CEFA   

LightSlateBlue  #8470FF   

LightSlateGray  #778899   

LightSteelBlue  #B0C4DE   

LightYellow  #FFFFE0   

Lime  #00FF00   

LimeGreen  #32CD32   

Linen  #FAF0E6   

Magenta  #FF00FF   

Maroon  #800000   

MediumAquaMarine  #66CDAA   

MediumBlue  #0000CD   

MediumOrchid  #BA55D3   

MediumPurple  #9370D8   

MediumSeaGreen  #3CB371   

MediumSlateBlue  #7B68EE   

MediumSpringGreen  #00FA9A   

MediumTurquoise  #48D1CC   

MediumVioletRed  #C71585   

MidnightBlue  #191970   

MintCream  #F5FFFA   

MistyRose  #FFE4E1   

Moccasin  #FFE4B5   

NavajoWhite  #FFDEAD   

Navy  #000080   

OldLace  #FDF5E6   

Olive  #808000   

OliveDrab  #6B8E23   

Orange  #FFA500   

OrangeRed  #FF4500   

Orchid  #DA70D6   

PaleGoldenRod  #EEE8AA   

PaleGreen  #98FB98   

PaleTurquoise  #AFEEEE   

PaleVioletRed  #D87093   

PapayaWhip  #FFEFD5   

PeachPuff  #FFDAB9   

Peru  #CD853F   

Pink  #FFC0CB   

Plum  #DDA0DD   

PowderBlue  #B0E0E6   

Purple  #800080   

Red  #FF0000   

RosyBrown  #BC8F8F   

RoyalBlue  #4169E1   

SaddleBrown  #8B4513   

Salmon  #FA8072   

SandyBrown  #F4A460   

SeaGreen  #2E8B57   

SeaShell  #FFF5EE   

Sienna  #A0522D   

Silver  #C0C0C0   

SkyBlue  #87CEEB   

SlateBlue  #6A5ACD   

SlateGray  #708090   

Snow  #FFFAFA   

SpringGreen  #00FF7F   

SteelBlue  #4682B4   

Tan  #D2B48C   

Teal  #008080   

Thistle  #D8BFD8   

Tomato  #FF6347   

Turquoise  #40E0D0   

Violet  #EE82EE   

VioletRed  #D02090   

Wheat  #F5DEB3   

White  #FFFFFF   

WhiteSmoke  #F5F5F5   

Yellow  #FFFF00   

YellowGreen  #9ACD32

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Fixe! Mmas quando for assim manda-me PM a informar para eu adicionar no indice pq senão ás tantas eu posso nem reparar...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Desculpa, não sabia desse procedimento !  :-[

Para a próxima eu aviso!

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Desculpa, não sabia desse procedimento !  :-[

Para a próxima eu aviso!

Não Há ainda nenhum procedimento rigidamente estabelecido, mas tás na boa! :P
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Atenção como foi dito só funciona em IE e no Opera também. No Maxthon funciona porque penso que é uma modificação do IE com a funcionalidade das TABS (penso eu de que).

Não vale a pena pesquisar para Firefox porque não dá mesmo.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Alguém se deu ao trabalho de verificar se isso quando incluido em código html não torna a página inválida? E quando é num ficheiro css externo?

Cumps 8)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Spread por acaso não. :S Deve ser contra as regras visto que é uma propriedade para o IE.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

E qual é a vantagem do programa? Faz funcionar noutros browsers além do IE?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

E qual é a vantagem do programa? Faz funcionar noutros browsers além do IE?

Pelo que o skin disse parece-me que nao. A única vantagem que vejo é nao "codares" a scrollbar, deve ser 1 cena tipo Paint mas só para ScrollBars xD

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

E qual é a vantagem do programa? Faz funcionar noutros browsers além do IE?

Não. Simplesmente não tens de saber o código e é mais fácil e escolher as cores a utilizar.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Então não vale a pena... é que não prejudicava nada que desse para mudar as scrollbars em todos os browsers, principalmente aquelas que estão dentro da página em si, porque na maior parte dos casos ficam completamente desenquadradas com o design da mesma.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Atenção que isto só funciona no IE e no Opera (a partir da versao 8.0, nao tenho a certeza) se os documentos não tiverem um DOCTYPE válido. Assim que se coloca um DOCTYPE válido (que dispara o modo strict do IE), as scrollbars voltam a cor original. O que na minha opinião está muito bem, uma vez que as scrollbars são elementos do sistema operativo, e não da página em si, portanto nem deveria dar para mudar a cor. Mas isto são outros pormenores.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora