{"id":63248,"date":"2023-06-28T13:08:41","date_gmt":"2023-06-28T12:08:41","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=63248&preview=true&preview_id=63248"},"modified":"2023-08-22T18:36:43","modified_gmt":"2023-08-22T17:36:43","slug":"css-text-umriss","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/","title":{"rendered":"Hinzuf\u00fcgen von Textumrissen mit CSS"},"content":{"rendered":"

Wenn es um Webdesign<\/a> geht, spielt die visuelle Anziehungskraft deiner Inhalte eine wichtige Rolle, um die Aufmerksamkeit deines Publikums zu gewinnen und zu halten. Ein Aspekt des Designs, der die Gesamt\u00e4sthetik und Lesbarkeit deiner Website erheblich beeinflussen kann, ist die Textgestaltung.<\/p>\n

Bei der Textgestaltung geht es nicht nur darum, eine Schriftart<\/a> und -farbe<\/a> auszuw\u00e4hlen. Es geht darum, verschiedene CSS<\/a>-Eigenschaften sorgf\u00e4ltig zu kombinieren, um den gew\u00fcnschten Effekt zu erzielen, wie z. B. die Verwendung von Textumrissen, um deinen Text visuell auff\u00e4llig zu machen.<\/p>\n

In diesem Artikel befassen wir uns mit der Kunst, die Umrisse von Texten mit CSS zu gestalten, und zeigen dir, wie das funktioniert und welche verschiedenen Optionen du nutzen kannst.<\/p>\n

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

Verstehen von Webtexten<\/h2>\n

Webtext ist Text, der auf einer Webseite angezeigt wird. Schriftarten spielen eine wichtige Rolle bei der Darstellung von Text im Web. Bei diesen Schriften handelt es sich im Wesentlichen um vektorbasierte Grafiken. Das bedeutet, dass sie nicht durch Pixeldaten begrenzt sind und in verschiedenen Gr\u00f6\u00dfen dargestellt werden k\u00f6nnen, ohne ihre Sch\u00e4rfe und Klarheit zu verlieren.<\/p>\n

Ein faszinierender Aspekt von Schriften als vektorbasierte Grafiken ist die M\u00f6glichkeit, einzelne Zeichen mit Strichen oder Umrissen zu versehen. So wie du in Vektorprogrammen wie Adobe Illustrator einen Strich um eine Form ziehen kannst, bietet CSS die M\u00f6glichkeit, denselben Effekt bei Webtexten zu erzielen.<\/p>\n

2 Methoden zum Hinzuf\u00fcgen von Textumrissen mit CSS<\/h2>\n

Wenn du deinem Text mit CSS einen Umriss-Effekt hinzuf\u00fcgen willst, gibt es zwei Methoden, die du anwenden kannst. Sehen wir uns an, welche Nachteile diese Methoden haben und wie man sie einsetzt.<\/p>\n

1. Verwendung der Eigenschaft text-stroke<\/h3>\n

text-stroke<\/code> ist eine CSS-Eigenschaft, die du verwenden kannst, um deinen Texten einen Umriss hinzuzuf\u00fcgen. Sie erm\u00f6glicht es dir, die Umrisse width<\/code> und color<\/code> festzulegen. Diese Eigenschaft wird nur von WebKit-basierten Browsern unterst\u00fctzt, und damit du sie nutzen kannst, musst du das Pr\u00e4fix -webkit-<\/code> hinzuf\u00fcgen.<\/p>\n

F\u00fcgen wir zum Beispiel einen Schriftzug zu einem h1<\/code> \u00dcberschriftstext hinzu – „Willkommen bei Kinsta“:<\/p>\n

<h1>Welcome to Kinsta<\/h1><\/code><\/pre>\n
So wird die Eigenschaft text-stroke<\/code> mit dem Pr\u00e4fix -webkit-<\/code> verwendet:<\/p>\n
h1 {\n  -webkit-text-stroke-width: 3px;\n  -webkit-text-stroke-color: black;\n}<\/code><\/pre>\n
-webkit-text-stroke-width<\/code> und -webkit-text-stroke-color<\/code> geben den width<\/code> bzw. color<\/code> des Schriftzugs an. Sie setzt width<\/code> auf 3px<\/code> und color<\/code> auf black<\/code>.<\/p>\n
\"Hinzuf\u00fcgen
Hinzuf\u00fcgen eines Umrisses mit der Eigenschaft text-stroke<\/figcaption><\/figure>\n
Die beiden oben genannten Eigenschaften k\u00f6nnen mit der Shorthand-Eigenschaft -webkit-text-stroke<\/code> kombiniert werden, die gleichzeitig den Schriftzug color<\/code> und width<\/code> festlegt.<\/p>\n
h1 {\n  -webkit-text-stroke: 3px black;\n}<\/code><\/pre>\n
Dies ergibt die gleiche Ausgabe.<\/p>\n
Unterst\u00fctzung f\u00fcr die Eigenschaft text-stroke<\/h4>\n
Laut caniuse<\/a> gibt es keine Unterst\u00fctzung f\u00fcr die Eigenschaft text-stroke<\/code> im Internet Explorer Browser.<\/p>\n
\"Unterst\u00fctzung
Unterst\u00fctzung f\u00fcr die text-stroke-Eigenschaft<\/figcaption><\/figure>\n
Wenn du die Eigenschaft text-stroke<\/code> verwendest, um den Umriss deines Textes festzulegen, und ein Benutzer einen nicht unterst\u00fctzten Browser verwendet, ist dieser Text m\u00f6glicherweise nicht sichtbar, wenn seine Farbe mit der Hintergrundfarbe \u00fcbereinstimmt.<\/p>\n
Um dies zu beheben, kannst du die Eigenschaft -webkit-text-fill-color<\/code> verwenden, um eine color<\/code> f\u00fcr den Text festzulegen, und mit der Eigenschaft color<\/code> eine Fallback-Farbe einstellen:<\/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
\"Hinzuf\u00fcgen
Hinzuf\u00fcgen der Unterst\u00fctzung f\u00fcr nicht unterst\u00fctzte Browser<\/figcaption><\/figure>\n
Wenn ein Browser die Eigenschaft text-stroke<\/code> nicht unterst\u00fctzt, verwendet er die Farbe, die mit der Eigenschaft color<\/code> festgelegt wurde.<\/p>\n
\"Fallback,
Fallback, wenn der Browser nicht unterst\u00fctzt wird<\/figcaption><\/figure>\n
Eine andere M\u00f6glichkeit ist, vor dem Hinzuf\u00fcgen der Formatvorlage zu \u00fcberpr\u00fcfen, ob der Browser die Eigenschaft -webkit-text-stroke<\/code> unterst\u00fctzt.<\/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. Verwendung der text-shadow-Eigenschaft<\/h3>\n
Wenn du dich nicht um die Unterschiede in der Unterst\u00fctzung k\u00fcmmern willst, kannst du die Eigenschaft text-shadow<\/code> verwenden, die alle aktuellen Versionen der g\u00e4ngigen Browser unterst\u00fctzt<\/a>.<\/p>\n
\"Unterst\u00fctzung
Unterst\u00fctzung f\u00fcr die text-shadow-Eigenschaft<\/figcaption><\/figure>\n
F\u00fcr die Eigenschaft text-shadow<\/code> werden wir vier Schatten verwenden, jeweils oben rechts<\/strong>, oben links<\/strong>, unten links<\/strong> und unten rechts<\/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 diesem Beispiel verwenden wir vier Schatten, um einen Textumriss-Effekt zu erzeugen. Jeder Schatten hat einen Abstand von 3 Pixeln zum Text und die Farbe ist auf Schwarz (#000<\/code>) eingestellt. Dieser Effekt \u00e4hnelt dem, den die erste Methode erzeugt.<\/p>\n
\"Hinzuf\u00fcgen
Hinzuf\u00fcgen eines Umrisses mit der Eigenschaft text-shadow<\/figcaption><\/figure>\n
Indem wir alle vier Ecken des Textes mit einem Schatten versehen, erhalten wir eine gut definierte Kontur. Du kannst die Pixelabst\u00e4nde, die Schattenfarben oder die Textfarben an deine eigenen Gestaltungsw\u00fcnsche anpassen.<\/p>\n
Diese Methode bietet dir einen zus\u00e4tzlichen Vorteil, da du die horizontalen und vertikalen Schatten so anpassen kannst, wie es zum Text passt. Du kannst auch einen kleinen Unsch\u00e4rferadius hinzuf\u00fcgen:<\/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
\"F\u00fcge
F\u00fcge der Kontur mit der Eigenschaft Textschatten eine Unsch\u00e4rfe hinzu<\/figcaption><\/figure>\n
Eine Einschr\u00e4nkung bei der Verwendung von Textschatten ist, dass es zu einem unterbrochenen Stricheffekt kommen kann, wenn die L\u00e4nge des Schattens 1 Pixel \u00fcberschreitet (du wirst das sehen, wenn du es mit der Methode text-stroke<\/code> vergleichst).<\/p>\n
Kombinieren der Eigenschaften text-stroke und text-shadow<\/h2>\n
Du kannst beide Eigenschaften kombinieren, um einen visuell beeindruckenden Effekt zu erzielen, der eine perfekte Textkontur mit einer subtilen Unsch\u00e4rfe und zus\u00e4tzlichen Effekten kombiniert, die die Eigenschaft text-shadow<\/code> bietet. Diese Kombination erm\u00f6glicht einen vielseitigen und anpassbaren Ansatz, um das Aussehen deines Textes zu verbessern.<\/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
\"Kombinieren
Kombinieren von Text-Strich und Text-Schatten, um eine Kontur zu erzeugen<\/figcaption><\/figure>\n
Du kannst auch darauf verzichten, jeder Ecke einen eigenen Schatten hinzuzuf\u00fcgen und mit einer Linie einen allgemeinen Schatten auftragen:<\/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
\"Weitere
Weitere Beispiele f\u00fcr die Umsetzung von Umrissen mit text-stroke und text-shadow<\/figcaption><\/figure>\n
Zusammenfassung<\/h2>\n
Sowohl die Eigenschaften text-stroke<\/code> als auch text-shadow<\/code> bieten wertvolle Optionen, um deinem Text Umrisse hinzuzuf\u00fcgen. Die Wahl zwischen ihnen h\u00e4ngt von der Browserkompatibilit\u00e4t, den gew\u00fcnschten Effekten und dem Grad der Kontrolle ab, den du f\u00fcr dein Design ben\u00f6tigst.<\/p>\n
Experimentiere mit verschiedenen Techniken und finde die beste Herangehensweise, um fesselnde und visuell ansprechende Textumrisse zu erstellen. Du kannst die Hosting-Funktionen von Kinsta<\/a> mit deinem kompletten Projekt kombinieren, um eine ansprechende Online-Pr\u00e4senz zu erstellen.<\/p>\n
Teile deine Erfahrungen! Hast du andere Methoden verwendet, die in diesem Artikel nicht behandelt wurden? Lass es uns in den Kommentaren wissen.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Wenn es um Webdesign geht, spielt die visuelle Anziehungskraft deiner Inhalte eine wichtige Rolle, um die Aufmerksamkeit deines Publikums zu gewinnen und zu halten. Ein Aspekt …<\/p>\n","protected":false},"author":287,"featured_media":63249,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[990],"class_list":["post-63248","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-webentwicklung-sprachen"],"yoast_head":"\nHinzuf\u00fcgen von Textumrissen mit CSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Verbessere die visuelle Attraktivit\u00e4t deiner Website und hebe deinen Text mit einer attraktiven Textkontur hervor. Beginne noch heute mit dem Einsatz von CSS-Techniken!\" \/>\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\/de\/blog\/css-text-umriss\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hinzuf\u00fcgen von Textumrissen mit CSS\" \/>\n<meta property=\"og:description\" content=\"Verbessere die visuelle Attraktivit\u00e4t deiner Website und hebe deinen Text mit einer attraktiven Textkontur hervor. Beginne noch heute mit dem Einsatz von CSS-Techniken!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-28T12:08:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T17:36:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/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=\"Verbessere die visuelle Attraktivit\u00e4t deiner Website und hebe deinen Text mit einer attraktiven Textkontur hervor. Beginne noch heute mit dem Einsatz von CSS-Techniken!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Hinzuf\u00fcgen von Textumrissen mit CSS\",\"datePublished\":\"2023-06-28T12:08:41+00:00\",\"dateModified\":\"2023-08-22T17:36:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/\"},\"wordCount\":996,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/\",\"name\":\"Hinzuf\u00fcgen von Textumrissen mit CSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg\",\"datePublished\":\"2023-06-28T12:08:41+00:00\",\"dateModified\":\"2023-08-22T17:36:43+00:00\",\"description\":\"Verbessere die visuelle Attraktivit\u00e4t deiner Website und hebe deinen Text mit einer attraktiven Textkontur hervor. Beginne noch heute mit dem Einsatz von CSS-Techniken!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web-Entwicklungssprachen\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/webentwicklung-sprachen\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Hinzuf\u00fcgen von Textumrissen mit CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hinzuf\u00fcgen von Textumrissen mit CSS - Kinsta\u00ae","description":"Verbessere die visuelle Attraktivit\u00e4t deiner Website und hebe deinen Text mit einer attraktiven Textkontur hervor. Beginne noch heute mit dem Einsatz von CSS-Techniken!","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\/de\/blog\/css-text-umriss\/","og_locale":"de_DE","og_type":"article","og_title":"Hinzuf\u00fcgen von Textumrissen mit CSS","og_description":"Verbessere die visuelle Attraktivit\u00e4t deiner Website und hebe deinen Text mit einer attraktiven Textkontur hervor. Beginne noch heute mit dem Einsatz von CSS-Techniken!","og_url":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-06-28T12:08:41+00:00","article_modified_time":"2023-08-22T17:36:43+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Verbessere die visuelle Attraktivit\u00e4t deiner Website und hebe deinen Text mit einer attraktiven Textkontur hervor. Beginne noch heute mit dem Einsatz von CSS-Techniken!","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Hinzuf\u00fcgen von Textumrissen mit CSS","datePublished":"2023-06-28T12:08:41+00:00","dateModified":"2023-08-22T17:36:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/"},"wordCount":996,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/","url":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/","name":"Hinzuf\u00fcgen von Textumrissen mit CSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg","datePublished":"2023-06-28T12:08:41+00:00","dateModified":"2023-08-22T17:36:43+00:00","description":"Verbessere die visuelle Attraktivit\u00e4t deiner Website und hebe deinen Text mit einer attraktiven Textkontur hervor. Beginne noch heute mit dem Einsatz von CSS-Techniken!","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/06\/css-text-outline.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/css-text-umriss\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Web-Entwicklungssprachen","item":"https:\/\/kinsta.com\/de\/thema\/webentwicklung-sprachen\/"},{"@type":"ListItem","position":3,"name":"Hinzuf\u00fcgen von Textumrissen mit CSS"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=63248"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63248\/revisions"}],"predecessor-version":[{"id":63415,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/63248\/revisions\/63415"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63248\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63248\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63248\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63248\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63248\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63248\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63248\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63248\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/63248\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/63249"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=63248"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=63248"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=63248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}