Gekleurde Scrollbars Maken
Op veel sites kom je fraai gekleurde scrollbars (schuifbalken) tegen. Je leert hier hoe je zelf zulke scrollbars kunt maken. Het ziet er toch heel wat beter uit dan die grijze dingen.
Gekleurde scrollbars worden standaard ondersteund door Internet Explorer 5.5 en hoger. Je kunt het beste eerst de laatste versie van Internet Explorer downloaden als je een oudere versie hebt, anders zal je ze niet kunnen zien. Bezoekers die geen IE 5.5 of hoger hebben, zien gewoon de standaard grijze scrollbars.
De browser Opera ondersteunt ook scrollbars vanaf versie 7, maar dit staat niet standaard ingeschakeld. Je kunt dit wel heel makkelijk inschakelen in de opties van de browser. Het marktaandeel van Opera in de browsermarkt is echter zeer beperkt op dit moment (minder dan 1%).
Gekleurde scrollbars worden dus ondersteund door individuele webbrowsers, maar ze maken geen deel uit van de CSS webstandaarden. Dat betekent dat browsers die zich alleen aan de standaarden houden gewoon hun standaardscrollbars zullen laten zien, ook al gebruik je de onderstaande codes. Aangezien IE echter een groot marktaandeel heeft zullen veel mensen toch je gekleurde scrollbars kunnen zien mocht je ze willen gebruiken.
Hoe maak ik ze?
Je maakt de gekleurde scrollbars met CSS (=Cascading Style Sheets). Ik ga er vanuit dat je de beginselen van CSS kent, is dat niet zo dan kun je de CSS Cursus op Homepage-Maken volgen!
Voorbeeld van gekleurde scrollbars
<html>
<head>
<title>De titel van je pagina.</title>
<style type="text/css">
<!--
body
{
scrollbar-arrow-color: #FFFF00;
scrollbar-face-color: #FF0000;
scrollbar-highlight-color: #0000FF;
scrollbar-3dlight-color: #008000;
scrollbar-shadow-color: #00FFFF;
scrollbar-darkshadow-color: #008080;
scrollbar-track-color: #FFA500;
}
-->
</style>
</head>
<body>De inhoud van je pagina.
</body>
</html
Je geeft de stijlregels dus op voor de body tag. De kleuren van de scrollbar in het voorbeeld zijn willekeurig gekozen, je kunt het beste zelf een beetje experimenteren met de verschillende kleurwaarden om zo iets te maken dat bij het ontwerp van je site past.
Hieronder staat een plaatje waarop je kunt zien wat je precies kunt veranderen met al de scrollbar eigenschappen.
Voor een overzicht van verschillende kleuren en hun RGB waardes kun je hier kijken!
Over scrollbar-base-color
Nu nog even wat over een alternatief attribuut dat je voor de scrollbars kunt gebruiken. Er bestaat namelijk nog het attribuut scrollbar-base-color. Dit attribuut combineert de scrollbar-track-color en scrollbar-face-color attributen. Als je dus een kleur opgeeft voor scrollbar-base-color dan krijgen de scrollbar track, de scrollbox face (het blokje dat je kunt verslepen in de scrollbar) en de scroll arrow faces (de hokjes om de kleine pijltjes boven en onder) deze kleur toegewezen. Je kunt scrollbar-base-color gebruiken als een 'snelle' manier om kleuren toe te kennen aan de scrollbars.
Ik raad je echter aan om dit attribuut links te laten liggen en de hierboven genoemde zeven attributen te gebruiken. Dat voorkomt verwarring als je later vergeten bent wat scrollbar-base-color ook alweer precies doet.
Gekleurde scrollbars voor textareas
Hierboven heb ik het gehad over de scrollbars die je in je browser te zien krijgt aan de rechterkant en soms aan de onderkant van het scherm. Je kunt echter ook de scrollbars van een zogenaamde textarea kleur geven.
Een textarea zie je vaak in formulieren. Iemand kan daar dan informatie invullen die verzonden moet worden. Een textarea wordt gemaakt met de <textarea> en </textarea> tags.
Om een textarea kleur te geven, maak je eerst een class aan in je stylesheet met daarin dezelfde attributen als hierboven bij de andere scrollbars.
Dus bijvoorbeeld:
<html>
<head>
<title>De titel van je pagina.</title>
<style type="text/css">
<!--
.gekleurdetextarea
{
scrollbar-arrow-color: #FFFF00;
scrollbar-face-color: #FF0000;
scrollbar-highlight-color: #0000FF;
scrollbar-3dlight-color: #008000;
scrollbar-shadow-color: #00FFFF;
scrollbar-darkshadow-color: #008080;
scrollbar-track-color: #FFA500;
}
-->
</style>
</head>
<body>
<form>
<textarea class="gekleurdetextarea" cols="20" rows="8">
</textarea>
</form>
</body>
</html
Zoals je ziet heb ik in deze code ook een formulier aangemaakt met daarin een textarea van een bepaalde grootte.
Zo'n textarea met deze toegekende class komt er dan als volgt uit te zien:
Als je ook nog een scrollbar aan de onderkant van de textarea wilt zien en niet alleen die aan de rechterkant dan moet je even het attribuut wrap="off" toevoegen aan de textarea tag. De tekst wordt dan niet meer gewrapt en bezoekers zullen dan dus naar rechts moeten scrollen om de tekst te kunnen lezen.
Door een class aan te maken en toe te kennen aan een bepaalde textarea kun je zelf bepalen welke textareas gekleurde scrollbars moeten krijgen. Als je een gewone <textarea> tag gebruikt dan krijg je gewone, grijze scrollbars. Pas als je de code class="gekleurdetextarea" toevoegt aan de tag dan krijgt de textarea gekleurde scrollbars.
Tot slot: scrollbar software
Als je geen zin hebt om zelf codes te maken voor gekleurde scrollbars dan kun je het programma ScrollBar downloaden. Hiermee kun je eenvoudig en snel gekleurde scrollbars maken. Op deze pagina kun je dit freeware programma downloaden.
Ik hoop dat je wat aan het artikel gehad hebt en je nu weet wat de scrollbar attributen precies doen. Belangrijk om te onthouden is dat gekleurde scrollbars geen deel uitmaken van de CSS standaarden. Individuele browsers, waarvan Internet Explorer veruit het belangrijkste voorbeeld is, ondersteunen ze wel, maar browsers die zich strikt aan een standaard houden zullen de codes voor gekleurde scrollbars negeren en hun standaardkleur tonen.
Lees ook:
Wat vond je van dit artikel?
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
