{"id":53552,"date":"2023-06-28T14:16:08","date_gmt":"2023-06-28T12:16:08","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=53552&preview=true&preview_id=53552"},"modified":"2023-06-30T11:07:07","modified_gmt":"2023-06-30T09:07:07","slug":"css-tekstomtrek","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/","title":{"rendered":"Zo voeg je tekstomtrek toe met CSS"},"content":{"rendered":"

Als het gaat om webdesign<\/a>, speelt de visuele aantrekkingskracht van je inhoud een essenti\u00eble rol bij het trekken en vasthouden van de aandacht van je publiek. E\u00e9n aspect van het ontwerp, dat de algehele esthetiek en leesbaarheid van je website aanzienlijk kan be\u00efnvloeden, is tekststyling.<\/p>\n

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

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.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Webteksten begrijpen<\/h2>\n

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.<\/p>\n

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.<\/p>\n

2 methodes om een tekstomtrek toe te voegen met CSS<\/h2>\n

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.<\/p>\n

1. De text-stroke property gebruiken<\/h3>\n

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

Laten we bijvoorbeeld een lijn toevoegen aan een h1<\/code> header -“Welcome to Kinsta”:<\/p>\n

<h1>Welcome to Kinsta<\/h1><\/code><\/pre>\n
Zo wordt de property text-stroke<\/code> gebruikt met het prefix -webkit-<\/code>:<\/p>\n
h1 {\n  -webkit-text-stroke-width: 3px;\n  -webkit-text-stroke-color: black;\n}<\/code><\/pre>\n
-webkit-text-stroke-width<\/code> en -webkit-text-stroke-color<\/code> geven respectievelijk de slag width<\/code> en color<\/code> aan. Het stelt de width<\/code> in op 3px<\/code> en color<\/code> op black<\/code>.<\/p>\n
\"Omtrek
Omtrek toevoegen met de text-stroke property.<\/figcaption><\/figure>\n
Deze twee bovenstaande property kunnen worden gecombineerd met de stenografische property -webkit-text-stroke<\/code>, die tegelijkertijd de lijn color<\/code> en width<\/code> specificeert.<\/p>\n
h1 {\n  -webkit-text-stroke: 3px black;\n}<\/code><\/pre>\n
Dit geeft dezelfde uitvoer.<\/p>\n
Ondersteuning voor tekst-stroke property<\/h4>\n
Volgens caniuse<\/a> is er geen ondersteuning voor de property text-stroke<\/code> in de Internet Explorer browser.<\/p>\n
\"Ondersteuning
Ondersteuning voor de property text-stroke.<\/figcaption><\/figure>\n
Als je de property text-stroke<\/code> 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.<\/p>\n
Om dit op te lossen kun je de property -webkit-text-fill-color<\/code> gebruiken om een color<\/code> voor de tekst in te stellen en een fallback kleur instellen met de property color<\/code>:<\/p>\n
h1 {\n  color: black;\n  -webkit-text-fill-color: white; \/* Will override color (regardless of order) *\/\n  -webkit-text-stroke: 3px black;\n}<\/code><\/pre>\n
\"Ondersteuning
Ondersteuning voor niet-ondersteunde browsers toevoegen.<\/figcaption><\/figure>\n
Als een browser de property text-stroke<\/code> niet ondersteunt, wordt de kleur gebruikt die is ingesteld met de property color<\/code>.<\/p>\n
\"Fallback
Fallback wanneer de browser niet wordt ondersteund.<\/figcaption><\/figure>\n
Een andere optie is om te controleren of de browser de property -webkit-text-stroke<\/code> ondersteunt voordat je de stijl toevoegt.<\/p>\n
@supports (-webkit-text-stroke: 3px black) {\n  h1 {\n    -webkit-text-fill-color: white;\n    -webkit-text-stroke: 3px black;\n  }\n}<\/code><\/pre>\n
2. De property text-shadow gebruiken<\/h3>\n
Als je geen zin hebt om na te denken over welke browsers het wel of niet ondersteunen, kun je de property text-shadow<\/code> gebruiken, die ondersteuning biedt<\/a> voor alle nieuwste versies van populaire browsers.<\/p>\n
\"Ondersteuning
Ondersteuning voor de text-shadow property.<\/figcaption><\/figure>\n
Voor de property text-shadow<\/code> gebruiken we vier schaduwen, rechtsboven<\/strong>, linksboven<\/strong>, linksonder<\/strong> en rechtsonder<\/strong>.<\/p>\n
h1 {\n  color: #fff;\n  text-shadow:\n    3px 3px 0 #000,\n    -3px 3px 0 #000,\n    -3px -3px 0 #000,\n    3px -3px 0 #000;\n}<\/code><\/pre>\n
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<\/code>). Dit effect is vergelijkbaar met dat van de eerste methode.<\/p>\n
\"Outline
Outline toevoegen met de text-shadow property.<\/figcaption><\/figure>\n
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.<\/p>\n
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:<\/p>\n
h1 {\n  color: #fff;\n  text-shadow:\n    3px 3px 2px #000,\n    -3px 3px 2px #000,\n    -3px -3px 0 #000,\n    3px -3px 0 #000;\n}<\/code><\/pre>\n
\"Voeg
Voeg vervaging toe aan contour met de text-shadow property.<\/figcaption><\/figure>\n
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<\/code> methode).<\/p>\n
Properties text-stroke en text-shadow combineren<\/h2>\n
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<\/code> biedt. Deze combinatie zorgt voor een veelzijdige en aanpasbare aanpak om het uiterlijk van je tekst te verbeteren.<\/p>\n
h1 {\n  -webkit-text-stroke: 1px black;\n   color: white;\n   text-shadow:\n       3px 3px 0 #000,\n     -1px -1px 0 #000,  \n      1px -1px 0 #000,\n      -1px 1px 0 #000,\n       1px 1px 0 #000;\n}<\/code><\/pre>\n
\"Text-stroke
Text-stroke en text-shadow combineren om een omtrek te maken.<\/figcaption><\/figure>\n
Je kunt ook afzien van het toevoegen van afzonderlijke schaduwen aan elke hoek en een algemene schaduw aanbrengen met \u00e9\u00e9n regel:<\/p>\n
#heading-1{\n\tcolor: white;\n\t-webkit-text-stroke: 1px #F8F8F8;\n\ttext-shadow: 0px 1px 4px #23430C;\n}\n\n#heading-2{\n\tcolor: white;\n\t-webkit-text-stroke: 1px #F8F8F8;\n\ttext-shadow: 0px 2px 4px red;\n}\n\n#heading-3{\n\tcolor: #333;\n\t-webkit-text-stroke: 1px #282828;\n\ttext-shadow: 0px 4px 4px #282828;\n}<\/code><\/pre>\n
\"Meer
Meer voorbeelden van text-stroke en text-shadow.<\/figcaption><\/figure>\n
Samenvatting<\/h2>\n
Zowel de properties text-stroke<\/code> en text-shadow<\/code> 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.<\/p>\n
Experimenteer met verschillende technieken en vind de beste aanpak om boeiende en visueel aantrekkelijke tekstcontouren te maken. Je kunt de hostingmogelijkheden van Kinsta<\/a> combineren met je project zodat jij online het best voor de dag komt.<\/p>\n
Deel je ervaring! Heb je nog andere benaderingen gebruikt die niet in dit artikel zijn behandeld? Laat het ons weten in de comments.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Als het gaat om webdesign, speelt de visuele aantrekkingskracht van je inhoud een essenti\u00eble rol bij het trekken en vasthouden van de aandacht van je publiek. …<\/p>\n","protected":false},"author":287,"featured_media":53553,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[884],"class_list":["post-53552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-webdevelopment-tools"],"yoast_head":"\nZo voeg je tekstomtrek toe met CSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Verbeter de visuele aantrekkingskracht van je website en laat je tekst opvallen met een aantrekkelijke tekstomtrek. Begin vandaag nog met het implementeren van CSS technieken!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zo voeg je tekstomtrek toe met CSS\" \/>\n<meta property=\"og:description\" content=\"Verbeter de visuele aantrekkingskracht van je website en laat je tekst opvallen met een aantrekkelijke tekstomtrek. Begin vandaag nog met het implementeren van CSS technieken!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-28T12:16:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-30T09:07:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Verbeter de visuele aantrekkingskracht van je website en laat je tekst opvallen met een aantrekkelijke tekstomtrek. Begin vandaag nog met het implementeren van CSS technieken!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Zo voeg je tekstomtrek toe met CSS\",\"datePublished\":\"2023-06-28T12:16:08+00:00\",\"dateModified\":\"2023-06-30T09:07:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/\"},\"wordCount\":980,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/\",\"name\":\"Zo voeg je tekstomtrek toe met CSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg\",\"datePublished\":\"2023-06-28T12:16:08+00:00\",\"dateModified\":\"2023-06-30T09:07:07+00:00\",\"description\":\"Verbeter de visuele aantrekkingskracht van je website en laat je tekst opvallen met een aantrekkelijke tekstomtrek. Begin vandaag nog met het implementeren van CSS technieken!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdevelopment tools\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/webdevelopment-tools\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Zo voeg je tekstomtrek toe met CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Zo voeg je tekstomtrek toe met CSS - Kinsta\u00ae","description":"Verbeter de visuele aantrekkingskracht van je website en laat je tekst opvallen met een aantrekkelijke tekstomtrek. Begin vandaag nog met het implementeren van CSS technieken!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/","og_locale":"nl_NL","og_type":"article","og_title":"Zo voeg je tekstomtrek toe met CSS","og_description":"Verbeter de visuele aantrekkingskracht van je website en laat je tekst opvallen met een aantrekkelijke tekstomtrek. Begin vandaag nog met het implementeren van CSS technieken!","og_url":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2023-06-28T12:16:08+00:00","article_modified_time":"2023-06-30T09:07:07+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Verbeter de visuele aantrekkingskracht van je website en laat je tekst opvallen met een aantrekkelijke tekstomtrek. Begin vandaag nog met het implementeren van CSS technieken!","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"7 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Zo voeg je tekstomtrek toe met CSS","datePublished":"2023-06-28T12:16:08+00:00","dateModified":"2023-06-30T09:07:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/"},"wordCount":980,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/","url":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/","name":"Zo voeg je tekstomtrek toe met CSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg","datePublished":"2023-06-28T12:16:08+00:00","dateModified":"2023-06-30T09:07:07+00:00","description":"Verbeter de visuele aantrekkingskracht van je website en laat je tekst opvallen met een aantrekkelijke tekstomtrek. Begin vandaag nog met het implementeren van CSS technieken!","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/06\/css-text-outline.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/css-tekstomtrek\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Webdevelopment tools","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/webdevelopment-tools\/"},{"@type":"ListItem","position":3,"name":"Zo voeg je tekstomtrek toe met CSS"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=53552"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53552\/revisions"}],"predecessor-version":[{"id":53557,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/53552\/revisions\/53557"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53552\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53552\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53552\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53552\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53552\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53552\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53552\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53552\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/53552\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/53553"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=53552"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=53552"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=53552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}