CSS - Texteffekte

Textfarbe

Die color-Eigenschaft in CSS ermöglicht es, die Farbe von Textelementen festzulegen. Sie können die Textfarbe mithilfe von Formaten wie Farbnamen, Hexadezimalwerten, RGB und HSL angeben.

Um die Textfarbe festzulegen, verwenden Sie die color-Eigenschaft gefolgt vom gewünschten Farbwert.

p {
  color: blue;
}

Alle <p>-Elemente werden eine blaue Textfarbe haben.

CSS bietet viele vordefinierte Farbnamen, die Sie verwenden können, wie red, green, blue und yellow. Für eine genauere Kontrolle über Farben können Sie Hexadezimalwerte, RGB oder HSL verwenden.

Hexadezimalwerte werden durch ein # gefolgt von sechs Zeichen dargestellt. Jedes Zeichenpaar zeigt die Intensität der Rot-, Grün- und Blaukomponenten an.

• #ff0000 steht für reines Rot
• #00ff00 steht für reines Grün
• #0000ff steht für reines Blau

RGB-Werte werden mit der Funktion rgb() und drei Parametern angegeben, die die Rot-, Grün- und Blaukomponenten darstellen (jeweils von 0 bis 255).

• rgb(255, 0, 0) steht für reines Rot
• rgb(0, 255, 0) steht für reines Grün
• rgb(0, 0, 255) steht für reines Blau

HSL-Werte werden mit der Funktion hsl() angegeben, die für Farbton (Winkel von 0 bis 360 Grad), Sättigung (Prozentsatz) und Helligkeit (Prozentsatz) steht.

• hsl(120, 100%, 50%) steht für Grün
• hsl(240, 100%, 50%) steht für Blau

Textfarben können von untergeordneten Elementen von ihren übergeordneten Elementen geerbt werden, es sei denn, sie werden ausdrücklich überschrieben. Die kaskadierende Natur von CSS gilt auch für Textfarben, wobei spezifischere Regeln Vorrang haben.

<div class="parent">
   <p>Dieser Text erbt die Farbe seines übergeordneten Elements.</p>
   <p class="child">Dieser Text hat seine eigene Farbe.</p>
</div>

.parent {
    color: green;
}

.child {
    color: blue;
}

Das erste <p>-Element wird einen grünen Text haben, der vom übergeordneten <div> geerbt wurde. Das zweite <p>-Element mit der Klasse "child" wird aufgrund der spezifischen angewendeten Regel einen blauen Text haben.

Textausrichtung

Die CSS-Eigenschaft text-align ermöglicht die Steuerung der horizontalen Textausrichtung innerhalb eines Elements. Sie können Text linksbündig, rechtsbündig, zentriert oder im Blocksatz ausrichten.

Um die Textausrichtung festzulegen, verwenden Sie die text-align-Eigenschaft gefolgt von einem dieser Werte: left, right, center oder justify.

p {
  text-align: center;
}

• text-align: left; richtet den Text am linken Rand des Elements aus. Dies ist die Standardeinstellung.
• text-align: right; richtet den Text am rechten Rand des Elements aus.
• text-align: center; zentriert den Text innerhalb des Elements.
• text-align: justify; streckt den Text, um die volle Breite eines Elements auszufüllen und erzeugt gleichmäßige Abstände zwischen den Wörtern.

Sie können die Richtung auch mit Eigenschaften wie direction und unicode-bidi festlegen. Diese sind nützlich für Sprachen mit unterschiedlichen Schreibrichtungen wie Arabisch oder Hebräisch.

Die direction-Eigenschaft legt die Richtung fest, während die unicode-bidi-Eigenschaft bidirektionale Texte handhabt.

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Durch die Kombination dieser Eigenschaften können Sie sowohl die horizontale Ausrichtung als auch die Richtung Ihres Inhalts steuern.

Textdekoration

Die text-decoration-Eigenschaft in CSS ermöglicht es Ihnen, Linien zu Ihrem Text hinzuzufügen, wie Unterstriche, Überstriche oder Durchstreichungen. Sie können den Stil, die Farbe und die Dicke dieser Dekorationen steuern.

Um eine Dekoration zu Ihrem Text hinzuzufügen, verwenden Sie die text-decoration-Eigenschaft gefolgt von einem oder mehreren dieser Werte: underline, overline oder line-through.

p {
  text-decoration: underline;
}

h1 {
  text-decoration: overline;
}

a {
  text-decoration: line-through;
}

Sie können auch mehrere Dekorationen kombinieren, indem Sie die Werte durch ein Leerzeichen trennen.

p {
  text-decoration: underline overline;
}

Um das Erscheinungsbild der Dekorationen weiter zu steuern, können Sie diese Eigenschaften verwenden:

• text-decoration-line: Legt die Art der Dekoration fest (Unterstrich, Überstrich, Durchstreichung).
• text-decoration-color: Setzt die Farbe der Dekoration.
• text-decoration-style: Bestimmt den Stil der Dekoration (durchgezogen, doppelt, gepunktet, gestrichelt).

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Sie können auch die Dicke mit text-decoration-thickness festlegen. Es akzeptiert Längenwerte oder Schlüsselwörter wie auto, from-font oder thick.

p {
  text-decoration-line: overline;
  text-decoration-thickness: 5px;
}

Texttransformation

Die CSS-Eigenschaft text-transform ermöglicht es Ihnen, die Groß- und Kleinschreibung von Text zu ändern. Sie können Text in Großbuchstaben umwandeln, in Kleinbuchstaben umwandeln oder den ersten Buchstaben jedes Wortes großschreiben.

Um Text zu transformieren, verwenden Sie die Eigenschaft text-transform gefolgt von einem dieser Werte: uppercase, lowercase oder capitalize.

h1 {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

.title {
  text-transform: capitalize;
}

<p>Dies ist ein normaler Absatz.</p>
<p class="uppercase">Dieser Absatz wird in Großbuchstaben sein.</p>
<p class="capitalize">dieser absatz wird großgeschrieben sein.</p>

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

Texttransformationen helfen, die Konsistenz im Schreibstil für bestimmte Elemente wie Überschriften oder Schaltflächen zu bewahren, ohne sie manuell in einer bestimmten Schreibweise einzugeben.

Die Eigenschaft text-transform ändert nur das Erscheinungsbild des Textes und verändert nicht seinen tatsächlichen Inhalt. Screenreader und andere Hilfstechnologien lesen ihn weiterhin in seiner ursprünglichen Schreibweise.

Textabstände

CSS bietet Eigenschaften zur Steuerung der Abstände und Positionierung von Text, einschließlich Buchstabenabstand, Wortabstand, Zeilenhöhe und vertikaler Ausrichtung.

Um den Abstand zwischen Zeichen anzupassen, verwenden Sie die Eigenschaft letter-spacing. Sie akzeptiert Längenwerte, entweder positiv oder negativ.

p {
  letter-spacing: 2px;
}

.tight {
  letter-spacing: -0.5px;
}

Positive Werte vergrößern den Abstand zwischen Zeichen; negative Werte verringern ihn. Dies hilft, die Lesbarkeit zu verbessern oder bestimmte typografische Stile zu erzeugen.

Um den Leerraum zwischen Wörtern zu steuern, verwenden Sie die Eigenschaft word-spacing. Sie akzeptiert ebenfalls Längenwerte.

p {
  word-spacing: 10px;
}

.narrow {
  word-spacing: -2px;
}

Die Vergrößerung des Wortabstands kann die Lesbarkeit längerer Texte verbessern. Eine Verringerung kann ein kompakteres Aussehen erzeugen.

Die Eigenschaft line-height legt die Höhe jeder Textzeile fest. Sie akzeptiert Längenwerte, Prozentangaben oder einheitenlose Werte.

p {
  line-height: 1.5;
}

.tall {
  line-height: 200%;
}

Die Anpassung der Zeilenhöhe kann die Lesbarkeit verbessern, indem sie ausreichend vertikalen Raum zwischen den Zeilen bietet und den gesamten visuellen Rhythmus beeinflusst.

Die Eigenschaft vertical-align steuert die vertikale Ausrichtung von Inline-Elementen relativ zueinander oder zur Grundlinie ihres Containers. Häufige Werte sind baseline, top, middle und bottom.

img {
  vertical-align: middle;
}

.subscript {
  vertical-align: sub;
}

Die vertikale Ausrichtung ist nützlich, um Inline-Elemente wie Bilder oder Symbole mit dem umgebenden Text auszurichten.

Textschatten

Die text-shadow-Eigenschaft in CSS ermöglicht es, Schatteneffekte für Textelemente zu erstellen. Sie können den Versatz, den Unschärferadius und die Farbe des Schattens festlegen, um verschiedene visuelle Effekte zu erzielen.

Um einen Textschatten zu erstellen, verwenden Sie die text-shadow-Eigenschaft gefolgt von Werten, die den horizontalen Versatz, den vertikalen Versatz, den Unschärferadius und die Farbe darstellen.

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Die text-shadow-Eigenschaft akzeptiert mehrere durch Kommas getrennte Werte:

• Horizontaler Versatz: Gibt den horizontalen Abstand des Schattens vom Text an. Positive Werte verschieben den Schatten nach rechts; negative Werte verschieben ihn nach links.
• Vertikaler Versatz: Gibt den vertikalen Abstand des Schattens vom Text an. Positive Werte verschieben ihn nach unten; negative Werte verschieben ihn nach oben.
• Unschärferadius (optional): Bestimmt, wie stark der Schatten unscharf gemacht wird. Ein größerer Wert erzeugt einen weicheren und diffuseren Effekt.
• Farbe: Legt die Farbe des Schattens fest, entweder durch Namen oder hexadezimale/RGB/HSL-Werte.

p {
  text-shadow: -2px -2px 0 red, 2px 2px 0 blue;
}

Textschatten können die Lesbarkeit verbessern, wenn sie vor Hintergründen mit geringem Kontrast verwendet werden. Setzen Sie sie jedoch sparsam ein, da übermäßige oder kontrastarme Schatten die Lesbarkeit für manche Nutzer beeinträchtigen können.

h2 {
    text-shadow: 
        -3px -3px #ff0000,
         -6px -6px #00ff00,
         -9px -9 px #0000ff;
}

Textüberlauf

CSS bietet Eigenschaften zur Behandlung von Situationen, in denen Text seinen Container überläuft. Sie können steuern, wie der überlaufende Text angezeigt wird, indem Sie die Eigenschaften overflow, white-space und text-overflow verwenden.

Die Eigenschaft overflow bestimmt, was passiert, wenn der Inhalt die Abmessungen seines Containers überschreitet. Sie akzeptiert Werte wie visible (Standard), hidden, scroll oder auto.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

Der Text innerhalb des .container-Elements wird abgeschnitten und ausgeblendet, wenn er überläuft.

Die Eigenschaft white-space steuert, wie Leerzeichen und Zeilenumbrüche innerhalb eines Elements behandelt werden. Der Wert nowrap verhindert, dass Text umgebrochen wird, was dazu führt, dass er überläuft, wenn er die Breite des Containers überschreitet.

p {
  white-space: nowrap;
}

Text innerhalb von <p>-Elementen wird nicht in die nächste Zeile umgebrochen und könnte den Container horizontal überlaufen.

Um überlaufenden Text mit einer Ellipse (...) abzuschneiden, können Sie die Eigenschaft text-overflow in Kombination mit overflow und white-space verwenden.

.truncate {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Text innerhalb von Elementen mit der Klasse .truncate wird mit einer Ellipse abgeschnitten, wenn er die Breite von 200 Pixeln überschreitet.

Durch das Setzen dieser Eigenschaften zusammen (overflow: hidden, white-space: nowrap und text-overflow: ellipsis) erstellen Sie eine einzelne Textzeile, die bei Überlauf abgeschnitten wird.

Um responsive Textcontainer zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen, können Sie relative Einheiten wie Prozentangaben oder vh/vw-Einheiten für Abmessungen verwenden.

.responsive-container {
  width: 100%;
  max-height: 50vh;
  overflow: auto;
}

Das .responsive-container-Element wird eine Breite von 100% seines Elternelements und eine maximale Höhe von der Hälfte der Viewport-Höhe haben. Wenn der Text diese maximale Höhe überschreitet, erscheint eine Bildlaufleiste.

Textumbruch

CSS bietet Eigenschaften zur Steuerung des Textumbruchs innerhalb eines Elements, einschließlich white-space, word-wrap, word-break, overflow-wrap und hyphens.

Die Eigenschaft white-space bestimmt, wie Leerzeichen und Zeilenumbrüche innerhalb eines Elements behandelt werden. Sie akzeptiert Werte wie normal, nowrap, pre, pre-wrap und pre-line.

p {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

<p>-Elemente werden den Text nicht in die nächste Zeile umbrechen, was zu einem Überlauf führt, wenn der Text länger als die Breite des Containers ist. Elemente mit der Klasse .pre bewahren Leerzeichen und Zeilenumbrüche so, wie sie im Quellcode erscheinen.

Um zu steuern, ob lange Wörter umgebrochen oder überlaufen sollen, verwenden Sie die Eigenschaft word-wrap. Sie akzeptiert Werte wie normal (Standard) oder break-word.

p {
  word-wrap: break-word;
}

Lange Wörter innerhalb von <p>-Elementen werden umgebrochen und in die nächste Zeile verschoben, wenn sie die Breite des Containers überschreiten.

Die Eigenschaft word-break legt fest, wie Wörter umgebrochen werden sollen, wenn sie das Ende einer Zeile erreichen. Sie akzeptiert Werte wie 'normal', 'break-all' und 'keep-all'.

.url {
  word-break: break-all;
}

.keep {
  word-break: keep-all;
}

Elemente mit der Klasse .url brechen Wörter und URLs an jeder Stelle um, um einen Überlauf zu verhindern. Elemente mit der Klasse .keep verhindern Wortumbrüche zwischen Buchstaben und halten ganze Wörter zusammen.

Die Eigenschaft 'overflow-wrap' (früher bekannt als 'word-wrap') bestimmt, ob ein langes Wort umgebrochen oder überlaufen soll, wenn es den Rand des Containers erreicht. Sie akzeptiert Werte wie 'normal' (Standard) oder 'anywhere'.

p { 
    overflow-wrap: anywhere; 
} 

Lange Wörter innerhalb von <p>-Elementen können bei Bedarf an jeder Stelle umgebrochen werden, um einen Überlauf zu verhindern.

Um Bindestriche auf umgebrochenen Text anzuwenden, verwenden Sie die Eigenschaft hyphens. Sie akzeptiert Werte wie 'none' (Standard), 'manual' und 'auto'.

 p { 
    hyphens: auto;
} 

Umgebrochener Text innerhalb von <p>-Elementen erhält automatisch Bindestriche an geeigneten Stellen, sofern dies von der Sprache und dem Browser unterstützt wird.

Die sorgfältige Verwendung dieser Eigenschaften trägt dazu bei, ein optimales Leseerlebnis zu gewährleisten, wobei die Sprache des Inhalts und die Zielbrowser berücksichtigt werden.

Texteffekte und -techniken

CSS bietet Eigenschaften und Techniken, mit denen Sie visuelle Effekte auf Textelemente erstellen können. Hier sind einige dieser Techniken, einschließlich der Erstellung von Farbverläufen und Mustern auf Text, der Anwendung von Textkontur und der Verwendung von Textmasken und -beschneidung.

Um Farbverläufe zu erstellen oder Muster auf Text anzuwenden, verwenden Sie die Eigenschaft background-clip zusammen mit der Eigenschaft text-fill-color. Die Eigenschaft background-clip legt fest, wie weit sich der Hintergrund innerhalb eines Elements erstrecken soll. Durch die Einstellung des Wertes auf text wird der Hintergrund auf die Form des Textes beschnitten.

h1 {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

p {
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
}

h1 {
  clip-path: polygon(0% 0%,100% 0%,100%80%,0%100%);
}

p {
  mask-image: url('mask.png');
  mask-size: cover;  
  mask-repeat: no-repeat;
}