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.
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.
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;
}Als een browser de property text-stroke niet ondersteunt, wordt de kleur gebruikt die is ingesteld met de property color.
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.
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.
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;
}
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;
}
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;
}
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.
Laat een reactie achter