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 des Designs, der die Gesamtästhetik und Lesbarkeit deiner Website erheblich beeinflussen kann, ist die Textgestaltung.
Bei der Textgestaltung geht es nicht nur darum, eine Schriftart und -farbe auszuwählen. Es geht darum, verschiedene CSS-Eigenschaften sorgfältig zu kombinieren, um den gewünschten Effekt zu erzielen, wie z. B. die Verwendung von Textumrissen, um deinen Text visuell auffällig zu machen.
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.
Verstehen von Webtexten
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ößen dargestellt werden können, ohne ihre Schärfe und Klarheit zu verlieren.
Ein faszinierender Aspekt von Schriften als vektorbasierte Grafiken ist die Möglichkeit, 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öglichkeit, denselben Effekt bei Webtexten zu erzielen.
2 Methoden zum Hinzufügen von Textumrissen mit CSS
Wenn du deinem Text mit CSS einen Umriss-Effekt hinzufügen willst, gibt es zwei Methoden, die du anwenden kannst. Sehen wir uns an, welche Nachteile diese Methoden haben und wie man sie einsetzt.
1. Verwendung der Eigenschaft text-stroke
text-stroke ist eine CSS-Eigenschaft, die du verwenden kannst, um deinen Texten einen Umriss hinzuzufügen. Sie ermöglicht es dir, die Umrisse width und color festzulegen. Diese Eigenschaft wird nur von WebKit-basierten Browsern unterstützt, und damit du sie nutzen kannst, musst du das Präfix -webkit- hinzufügen.
Fügen wir zum Beispiel einen Schriftzug zu einem h1 Überschriftstext hinzu – „Willkommen bei Kinsta“:
<h1>Welcome to Kinsta</h1>So wird die Eigenschaft text-stroke mit dem Präfix -webkit- verwendet:
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}-webkit-text-stroke-width und -webkit-text-stroke-color geben den width bzw. color des Schriftzugs an. Sie setzt width auf 3px und color auf black.
Die beiden oben genannten Eigenschaften können mit der Shorthand-Eigenschaft -webkit-text-stroke kombiniert werden, die gleichzeitig den Schriftzug color und width festlegt.
h1 {
-webkit-text-stroke: 3px black;
}Dies ergibt die gleiche Ausgabe.
Unterstützung für die Eigenschaft text-stroke
Laut caniuse gibt es keine Unterstützung für die Eigenschaft text-stroke im Internet Explorer Browser.
Wenn du die Eigenschaft text-stroke verwendest, um den Umriss deines Textes festzulegen, und ein Benutzer einen nicht unterstützten Browser verwendet, ist dieser Text möglicherweise nicht sichtbar, wenn seine Farbe mit der Hintergrundfarbe übereinstimmt.
Um dies zu beheben, kannst du die Eigenschaft -webkit-text-fill-color verwenden, um eine color für den Text festzulegen, und mit der Eigenschaft color eine Fallback-Farbe einstellen:
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke: 3px black;
}Wenn ein Browser die Eigenschaft text-stroke nicht unterstützt, verwendet er die Farbe, die mit der Eigenschaft color festgelegt wurde.
Eine andere Möglichkeit ist, vor dem Hinzufügen der Formatvorlage zu überprüfen, ob der Browser die Eigenschaft -webkit-text-stroke unterstützt.
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}2. Verwendung der text-shadow-Eigenschaft
Wenn du dich nicht um die Unterschiede in der Unterstützung kümmern willst, kannst du die Eigenschaft text-shadow verwenden, die alle aktuellen Versionen der gängigen Browser unterstützt.
Für die Eigenschaft text-shadow werden wir vier Schatten verwenden, jeweils oben rechts, oben links, unten links und unten rechts.
h1 {
color: #fff;
text-shadow:
3px 3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}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) eingestellt. Dieser Effekt ähnelt dem, den die erste Methode erzeugt.
Indem wir alle vier Ecken des Textes mit einem Schatten versehen, erhalten wir eine gut definierte Kontur. Du kannst die Pixelabstände, die Schattenfarben oder die Textfarben an deine eigenen Gestaltungswünsche anpassen.
Diese Methode bietet dir einen zusätzlichen Vorteil, da du die horizontalen und vertikalen Schatten so anpassen kannst, wie es zum Text passt. Du kannst auch einen kleinen Unschärferadius hinzufügen:
h1 {
color: #fff;
text-shadow:
3px 3px 2px #000,
-3px 3px 2px #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
Eine Einschränkung bei der Verwendung von Textschatten ist, dass es zu einem unterbrochenen Stricheffekt kommen kann, wenn die Länge des Schattens 1 Pixel überschreitet (du wirst das sehen, wenn du es mit der Methode text-stroke vergleichst).
Kombinieren der Eigenschaften text-stroke und text-shadow
Du kannst beide Eigenschaften kombinieren, um einen visuell beeindruckenden Effekt zu erzielen, der eine perfekte Textkontur mit einer subtilen Unschärfe und zusätzlichen Effekten kombiniert, die die Eigenschaft text-shadow bietet. Diese Kombination ermöglicht einen vielseitigen und anpassbaren Ansatz, um das Aussehen deines Textes zu verbessern.
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;
}
Du kannst auch darauf verzichten, jeder Ecke einen eigenen Schatten hinzuzufügen und mit einer Linie einen allgemeinen Schatten auftragen:
#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;
}
Zusammenfassung
Sowohl die Eigenschaften text-stroke als auch text-shadow bieten wertvolle Optionen, um deinem Text Umrisse hinzuzufügen. Die Wahl zwischen ihnen hängt von der Browserkompatibilität, den gewünschten Effekten und dem Grad der Kontrolle ab, den du für dein Design benötigst.
Experimentiere mit verschiedenen Techniken und finde die beste Herangehensweise, um fesselnde und visuell ansprechende Textumrisse zu erstellen. Du kannst die Hosting-Funktionen von Kinsta mit deinem kompletten Projekt kombinieren, um eine ansprechende Online-Präsenz zu erstellen.
Teile deine Erfahrungen! Hast du andere Methoden verwendet, die in diesem Artikel nicht behandelt wurden? Lass es uns in den Kommentaren wissen.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar