CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS User Interface

In dit hoofdstuk gaan we het hebben over enkele interessante CSS functies.

CSS user interface eigenschappen

De CSS user interface eigenschappen, zoals resize en outline-offset, kun je gebruiken om je webpagina's te verbeteren.

resize
outline-offset

Browser ondersteuning

De getallen in de tabel geven de browserversie aan die de eigenschap volledig ondersteunt. Hou de muis op de afbeelding in het tabel om de versie nummer van de browsers te weergeven.

Eigenschap
resize Ja Ja Ja Ja Ja
outline-offset Ja Ja Ja Ja Ja

CSS formaat wijzigen

De eigenschap resize geeft aan hoe een element door de gebruiker moet worden vergroot of verkleind.

Dit <div> element kan door de gebruiker worden vergroot of verkleind!

Klik en sleep de rechter onderhoek van dit element.

In het volgende voorbeeld kan de gebruiker alleen de breedte van het <div> element aanpassen:

VoorbeeldVoorbeeld: 
div {
  resize: horizontal;
  overflow: auto;
}

In het volgende voorbeeld kan de gebruiker alleen de hoogte van het <div> element wijzigen:

VoorbeeldVoorbeeld: 
div {
  resize: vertical;
  overflow: auto;
}

In het volgende voorbeeld kan de gebruiker zowel de hoogte als het breedte van het <div> element aanpassen:

VoorbeeldVoorbeeld: 
div {
  resize: both;
  overflow: auto;
}

In veel browsers is de <textarea> standaard aanpasbaar. We kunnen hier de eigenschap resize: none; aan toevoegen om de aanpasbaarheid uit te schakelen.

VoorbeeldVoorbeeld: 
textarea {
  resize: none;
}

Tip Gebruik de eigenschap resize: none; om de aanpasbaarheid uit te schakelen.

CSS outline offset

Deze div heeft een tussenruimte van 15px buiten de rand.
In het vorige gedeelte heb je geleerd hoe je de eigenschap resize kunt gebruiken waarmee je de breedte en de hoogte van een element kunt wijzigen. CSS biedt echter de eigenschap outline-offset aan voor het instellen van de ruimte tussen de rand van een element. Deze eigenschap accepteert ook een negatieve waarde, dat betekent dat je ook een outline kunt plaatsen in een element.

Deze div heeft een rode rand van 4px met een tussenruimte van 15px.

Deze div heeft een blauwe gestippelde rand van 4px met een negatieve waarde van -15px.

In het volgende voorbeeld wordt de outline-offset eigenschap gebruikt om ruimte tussen de rand en de outline toe te voegen:

VoorbeeldVoorbeeld: 
div.voorbeeld1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

div.voorbeeld2 {
  margin: 2px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: -15px;
}

CSS user interface eigenschappen

De volgende tabel bevat alle CSS user interface eigenschappen:

Eigenschap Beschrijving
resize De eigenschap resize geeft aan hoe een element door de gebruiker moet worden vergroot of verkleind.
outline-offset De eigenschap outline-offset kun je de ruimte tussen de rand en een element bepalen.
Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.