Outlining

Eerder hebben we de properties van borders bekeken, de randen die je rond elementen kan tekenen. Met de outline properties kan je nog extra randen tekenen om je element er visueel nog meer uit te laten springen. Outlining is net zo gemakkelijk als het tekenen van randen - kijk maar eens naar het volgende voorbeeld als bewijs:

<style type="text/css">
.box {
	background-color: #eee;
	outline: 3px solid LightCoral;
	border: 3px solid LightBlue;
	padding: 5px 10px;
}
</style>

<div class="box">Hello, world!</div>

Verschillen tussen randen en outlines

In het eerste voorbeeld leken de border en outline properties wel hetzelfde, maar er zijn toch wel een paar belangrijke verschillen:

· Je kan de individuele zijden niet van verschillende types outline voorzien, zoals dat met borders (randen) wel kon; alle vier de zijden moeten een outline van dezelfde dikte, stijl en kleur hebben.

· De outline draagt niet bij aan de afmetingen van het element. Het maakt niet uit hoe dik je de outline maakt, de grootte van het element verandert er niet door. Dat betekent ook dat je er zelf verantwoordelijk voor bent dat het element plus outline op je pagina past en niet in andere elementen steekt. De browser kan hier niet voor zorgen.

Verkorte naam

De property "outline" is een verkorte versie van de drie namen outline-width, outline-style en outline-color, net zoals we eerder gezien hebben voor de property "border". Je kan de langere namen ook apart gebruiken als je dat zou willen:

<style type="text/css">
.box {
	background-color: #eee;
	border: 3px solid LightBlue;
	padding: 5px 10px;
	outline-width: 3px;
	outline-style: solid;
	outline-color: LightCoral;
}
</style>

<div class="box">Hello, world!</div>

Hier hebben we exact hetzelfde gedaan als in het vorige voorbeeld, alleen iets omslachtiger.

Kleur van een outline

Color (kleur) is een alledaagse eigenschap, die je niet alleen voor outlines, maar ook voor andere CSS properties, op verschillende manieren kan definiëren. Later in deze handleiding lopen we de manieren langs waarop je kleuren kan aangeven in CSS.

Dikte van een outline

De dikte van outlines kan worden aangegeven zoals voor margins en paddings: in absolute of relatieve lengte eenheden. Voor de property "outline-width" (randdikte) bestaan een paar voorgekookte values: "thin" (dun), "medium" (gemiddeld), of "thick" (dik). Als je die waarden gebruikt, laat je het in feite aan de browser over hoe ze eruit gaan zien en dit betekent dat je niet precies weet hoe je werk in verschillende browsers getoond zal worden. Alle diktes in het volgende voorbeeld zijn uitgedrukt in de absolute eenheid px.

Stijl van een outline

Tot dusverre hebben we alleen de stijl "solid" (doorgetrokken) gebruikt, maar net als voor randen (borders) zijn er ook voor outlines genoeg keuzes: hidden (verborgen), dotted (gestippeld), dashed (gestreept), solid (doorgetrokken), double (dubbel), groove (groef), ridge (richel), inset en outset. Laten we maar eens kijken hoe ze eruit zien:

<style type="text/css">
.box {
	outline-color: CornflowerBlue;
	outline-width: 4px;
	margin: 10px;
	float: left;
	border: 2px solid LightCoral;
	padding: 5px 10px;
}
</style>

<div class="box" style="outline-style: dashed;">Dashed</div>
<div class="box" style="outline-style: dotted;">Dotted</div>
<div class="box" style="outline-style: double;">Double</div>
<div class="box" style="outline-style: groove;">Groove</div>
<div class="box" style="outline-style: inset;">Inset</div>
<div class="box" style="outline-style: outset;">Outset</div>
<div class="box" style="outline-style: ridge;">Ridge</div>
<div class="box" style="outline-style: solid;">Solid</div>

Offset van een outline

Het mooie van outlines is dat je ze op een zekere afstand van de rand kan tekenen door een value toe te kennen aan de property outline-offset. Deze value moet een CSS lengte specificeren en geeft de grootte van de lege ruimte tussen de rand (als die er is) en de outline. De ruimte is transparant en neemt dus de achtergrondkleur aan van de parent. Hier volgt een voorbeeld:

<style type="text/css">
.box {
	background-color: #eee;
	outline: 3px solid LightCoral;
	outline-offset: 3px;
	border: 3px solid LightBlue;
	padding: 5px 10px;
}
</style>

<div class="box">Hello, world!</div>

Ondersteuning van de property "outline-offset" is op het moment een beetje beperkt. Bijvoorbeeld niet één versie van Microsoft Internet Explorer ondersteunt het (maar Microsoft Edge wel).

Samenvatting

Je kan de outline properties gebruiken om een extra rand rond je element te tekenen, wat zorgt voor extra visuele aandacht. De outline werkt eigenlijk net als de border, maar met twee uitzonderingen: (i) de vier randen krijgen dezelfde outline (je kan niet per rand dikte, stijl of kleur specificeren) en (ii) de ruimte die de outline inneemt wordt niet opgeteld bij de dimensies van het element, wat bij borders wel het geval is.