Jump to content
pebat

[CSS] Mudar cores da scroollbar

Recommended Posts

pebat

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; 
}

Share this post


Link to post
Share on other sites
David Pintassilgo

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


cool stuffs to check.

http://blog.zxcoders.com//

Share this post


Link to post
Share on other sites
QuickFire

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 )

Share this post


Link to post
Share on other sites
pebat

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

Share this post


Link to post
Share on other sites
Ridelight

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

Share this post


Link to post
Share on other sites
David Pintassilgo

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

cool stuffs to check.

http://blog.zxcoders.com//

Share this post


Link to post
Share on other sites
gimbras

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.


Redcodestudio - Programação Web - http://www.redcodestudio.com/

Share this post


Link to post
Share on other sites
skin

eu sei de um programinha, que se chama Cool Web Scrollbars, que permite criar as barras de deslocamento na página com as cores que quisermos tendo mesmo uma ferramenta para captura de cores

podem fazer download em:

http://www.harmonyhollow.net/download/coolscrl.exe

espero ter ajudado


Our lives begin to end the day we become silent about things that matter - Martin Luther King

Share this post


Link to post
Share on other sites
helt

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


––––•(-• [ ђєlt ] •-)•––––

Share this post


Link to post
Share on other sites
UnKnowN

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

Share this post


Link to post
Share on other sites
skin

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.


Our lives begin to end the day we become silent about things that matter - Martin Luther King

Share this post


Link to post
Share on other sites
helt

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.


––––•(-• [ ђєlt ] •-)•––––

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.