Homepage » Tutorials » HTML & CSS » Scrollbar kleuren

Scrollbar kleuren

Info 
Door: Admin Moeilijkheidsgraad: 1/3
Views:34.204Reacties: 15(Bekijken)
  Log in om zelf te reageren
 Waardering:9.2/10 (5 stemmen)

Gerelateerde items

Uitgebreide cursus CSS




Op sommige sites zie ik gekleurde scrollbalken. Hoe maak ik dat?

Dat doe je met een stylesheet. Tussen <head> en </head> zet je bijvoorbeeld dit:

#Code
1
2
3
4
5
6
7
8
9
10
11
<style>
BODY { 
scrollbar-arrow-color:#eeeeee; 
scrollbar-track-color:#eeeeee; 
scrollbar-face-color:#000061; 
scrollbar-highlight-color:#F2F2FF; 
scrollbar-3dlight-color:#F2F2FF; 
scrollbar-darkshadow-color:#B3B3FF; 
scrollbar-shadow-color:#B3B3FF; 
}
</style>

Waar die woorden voor staan zie je hieronder. De kleurcodes ken je, dat zijn de hexadecimale codes. Leer daar hier meer over.

http://www.websitemaken.be/item_pics/16.gif

Door de hexadecimale codes te veranderen kun je je scrollbalken in verschillende kleuren krijgen.

Een nadeeltje: de gekleurde scrollbalken werken alleen in Internet Explorer. Dat is verder geen groot probleem, omdat de andere browsers ze gewoon negeren en dus geen problemen opleveren.

15 reacties
stinohomepage Geplaatst op 03-08-2007 om 11:53
 

Regular		 PS: waarom werkt het niet bij mij ?
ik heb windows Xp en de nieuwste versie van IE, wrm werkt het niet ?
stinohomepage Geplaatst op 03-08-2007 om 11:49
 

Regular		 maak een nieuw css en plaats dit erin

#Code
1
2
3
4
5
6
7
8
9
10
11
<style>
BODY { 
scrollbar-arrow-color:#eeeeee; 
scrollbar-track-color:#eeeeee; 
scrollbar-face-color:#000061; 
scrollbar-highlight-color:#F2F2FF; 
scrollbar-3dlight-color:#F2F2FF; 
scrollbar-darkshadow-color:#B3B3FF; 
scrollbar-shadow-color:#B3B3FF; 
}
</style>


en plaats tussen de style tags nog andere dingen die je wil veranderen, bv. een titel wil je onderlijnen, plaats dit tussen de style tags:

#Code
1
H3 {text-decoration: underline}


dan heb je iets als:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
BODY { 
scrollbar-arrow-color:#eeeeee; 
scrollbar-track-color:#eeeeee; 
scrollbar-face-color:#000061; 
scrollbar-highlight-color:#F2F2FF; 
scrollbar-3dlight-color:#F2F2FF; 
scrollbar-darkshadow-color:#B3B3FF; 
scrollbar-shadow-color:#B3B3FF; 
}

H3 {text-decoration: underline}
</style>


Noem dan dit bestand opmaak.css en plaats dit in de header van ELKE pagina:
#Code
1
<link rel="stylesheet" type="text/css" href="opmaak.css">
5v3n Geplaatst op 03-06-2007 om 15:45
 

Regular		 handig,

is het ook mogelijk deze te gebruiken over de hele website met een css bestand? Hoe?
Dmitri Geplaatst op 23-03-2006 om 18:59
Avatar van Dmitri

Regular		 thanks
Onbekend lid Geplaatst op 22-03-2006 om 18:13
 

Spammer		 Je moet de code in ELKE pagina zetten...

Pagina 1 2 3 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be