Als het gaat om webdesign, speelt de visuele aantrekkingskracht van je inhoud een essentiële rol bij het trekken en vasthouden van de aandacht van je publiek. Eén aspect van het ontwerp, dat de algehele esthetiek en leesbaarheid van je website aanzienlijk kan beïnvloeden, is tekststyling.

Tekststyling gaat verder dan alleen het kiezen van een lettertype en letterkleur. Het gaat om het zorgvuldig combineren van verschillende CSS eigenschappen om het gewenste effect te bereiken, zoals het gebruik van tekstcontouren (omtrekken) om je tekst visueel opvallend te maken.

In dit artikel verdiepen we ons in de kunst van het stylen van de omtrek van teksten met CSS en onderzoeken we hoe het werkt naast de verschillende opties die je kunt gebruiken.

Webteksten begrijpen

Webteksten zijn teksten die worden weergegeven op een webpagina. Lettertypen spelen een belangrijke rol bij het weergeven van tekst op het web. Deze lettertypes zijn in wezen op vectors gebaseerde afbeeldingen, wat betekent dat ze niet beperkt worden door pixeldata en op verschillende groottes kunnen worden weergegeven met behoud van hun scherpte en duidelijkheid.

Een fascinerend aspect van lettertypen die op vectoren gebaseerde afbeeldingen zijn, is de mogelijkheid om strepen of contouren aan te brengen rond individuele tekens. Net zoals je in vectorprogramma’s zoals Adobe Illustrator een lijn rond een vorm kunt tekenen, biedt CSS de mogelijkheid om hetzelfde effect op webtekst te bereiken.

2 methodes om een tekstomtrek toe te voegen met CSS

Als het gaat om het toevoegen van een omtrekeffect aan je tekst met CSS, zijn er twee methoden die je kunt gebruiken. Laten we eens kijken naar het nadeel van deze methoden en hoe je ze kunt gebruiken.

1. De text-stroke property gebruiken

De text-stroke is een CSS property die je kunt gebruiken om een contour aan je teksten toe te voegen. Hiermee kun je de contouren width en color specificeren. Deze property wordt alleen ondersteund door op WebKit gebaseerde browsers en om deze te kunnen gebruiken, moet je het prefix -webkit- toevoegen.

Laten we bijvoorbeeld een lijn toevoegen aan een h1 header -“Welcome to Kinsta”:

<h1>Welcome to Kinsta</h1>

Zo wordt de property text-stroke gebruikt met het prefix -webkit-:

h1 {
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
}

-webkit-text-stroke-width en -webkit-text-stroke-color geven respectievelijk de slag width en color aan. Het stelt de width in op 3px en color op black.

Omtrek toevoegen met de text-stroke property.
Omtrek toevoegen met de text-stroke property.

Deze twee bovenstaande property kunnen worden gecombineerd met de stenografische property -webkit-text-stroke, die tegelijkertijd de lijn color en width specificeert.

h1 {
  -webkit-text-stroke: 3px black;
}

Dit geeft dezelfde uitvoer.

Ondersteuning voor tekst-stroke property

Volgens caniuse is er geen ondersteuning voor de property text-stroke in de Internet Explorer browser.

Ondersteuning voor de property text-stroke.
Ondersteuning voor de property text-stroke.

Als je de property text-stroke gebruikt om de omtrek van je teksten in te stellen en een gebruiker maakt gebruik van een browser die niet wordt ondersteund, dan is die tekst mogelijk niet zichtbaar als de kleur ervan overeenkomt met de achtergrondkleur.

Om dit op te lossen kun je de property -webkit-text-fill-color gebruiken om een color voor de tekst in te stellen en een fallback kleur instellen met de property color:

h1 {
  color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke: 3px black;
}
Ondersteuning voor niet-ondersteunde browsers toevoegen.
Ondersteuning voor niet-ondersteunde browsers toevoegen.

Als een browser de property text-stroke niet ondersteunt, wordt de kleur gebruikt die is ingesteld met de property color.

Fallback wanneer de browser niet wordt ondersteund.
Fallback wanneer de browser niet wordt ondersteund.

Een andere optie is om te controleren of de browser de property -webkit-text-stroke ondersteunt voordat je de stijl toevoegt.

@supports (-webkit-text-stroke: 3px black) {
  h1 {
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 3px black;
  }
}

2. De property text-shadow gebruiken

Als je geen zin hebt om na te denken over welke browsers het wel of niet ondersteunen, kun je de property text-shadow gebruiken, die ondersteuning biedt voor alle nieuwste versies van populaire browsers.

Ondersteuning voor de text-shadow property.
Ondersteuning voor de text-shadow property.

Voor de property text-shadow gebruiken we vier schaduwen, rechtsboven, linksboven, linksonder en rechtsonder.

h1 {
  color: #fff;
  text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    -3px -3px 0 #000,
    3px -3px 0 #000;
}

In dit voorbeeld gebruiken we vier schaduwen om een omtrekeffect van de tekst te maken. Elke schaduw heeft een offset van 3 pixels ten opzichte van de tekst en de kleur is ingesteld op zwart (#000). Dit effect is vergelijkbaar met dat van de eerste methode.

Outline toevoegen met de text-shadow property.
Outline toevoegen met de text-shadow property.

Door schaduwen toe te passen op alle vier de hoeken van de tekst, krijgen we een goed gedefinieerde contour. Voel je vrij om de pixelafstanden, schaduwkleuren of tekstkleuren aan te passen aan je specifieke ontwerpvoorkeuren.

Deze methode geeft je een extra voordeel omdat je de horizontale en verticale schaduwen kunt aanpassen aan wat bij de tekst past. Je kunt ook een kleine onscherpte toevoegen:

h1 {
  color: #fff;
  text-shadow:
    3px 3px 2px #000,
    -3px 3px 2px #000,
    -3px -3px 0 #000,
    3px -3px 0 #000;
}
Voeg vervaging toe aan contour met de text-shadow property.
Voeg vervaging toe aan contour met de text-shadow property.

Een beperking van het gebruik van tekstschaduwen is dat je een onderbroken lijneffect kunt krijgen als de schaduw langer is dan 1 pixel (dit zie je als je het vergelijkt met de text-stroke methode).

Properties text-stroke en text-shadow combineren

Je kunt beide properties combineren om een visueel verbluffend effect te krijgen dat een perfecte tekstomtrek combineert met een subtiele vervaging en extra effecten die de property text-shadow biedt. Deze combinatie zorgt voor een veelzijdige en aanpasbare aanpak om het uiterlijk van je tekst te verbeteren.

h1 {
  -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
Text-stroke en text-shadow combineren om een omtrek te maken.
Text-stroke en text-shadow combineren om een omtrek te maken.

Je kunt ook afzien van het toevoegen van afzonderlijke schaduwen aan elke hoek en een algemene schaduw aanbrengen met één regel:

#heading-1{
	color: white;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 1px 4px #23430C;
}

#heading-2{
	color: white;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 2px 4px red;
}

#heading-3{
	color: #333;
	-webkit-text-stroke: 1px #282828;
	text-shadow: 0px 4px 4px #282828;
}
Meer voorbeelden van text-stroke en text-shadow.
Meer voorbeelden van text-stroke en text-shadow.

Samenvatting

Zowel de properties text-stroke en text-shadow bieden waardevolle opties voor het toevoegen van omtrekken aan je tekst. De keuze hangt af van de browsercompatibiliteit, de gewenste effecten en de mate van controle die je nodig hebt voor je ontwerp.

Experimenteer met verschillende technieken en vind de beste aanpak om boeiende en visueel aantrekkelijke tekstcontouren te maken. Je kunt de hostingmogelijkheden van Kinsta combineren met je project zodat jij online het best voor de dag komt.

Deel je ervaring! Heb je nog andere benaderingen gebruikt die niet in dit artikel zijn behandeld? Laat het ons weten in de comments.

Joel Olawanle Kinsta

Joel is een Frontend developer die bij Kinsta werkt als Technical Editor. Hij is een gepassioneerd leraar met liefde voor open source en heeft meer dan 200 technische artikelen geschreven, voornamelijk over JavaScript en zijn frameworks.