CSS - Textschatten

Leon A. -

Syntax und grundlegende Verwendung

Die CSS-Eigenschaft text-shadow ermöglicht es Ihnen, Schatten zu Textelementen hinzuzufügen. Sie nimmt vier Werte an: den horizontalen Versatz, den vertikalen Versatz, den Unschärferadius und die Farbe.

Die grundlegende Syntax zur Anwendung eines Textschattens lautet:

Beispiel: Grundlegende Syntax

selector {
  text-shadow: horizontal-offset vertical-offset blur-radius color;
}

Hier ist die Bedeutung jedes Wertes:

  1. horizontal-offset: Der Abstand in Pixeln, um den der Schatten horizontal vom Text versetzt sein soll. Ein positiver Wert verschiebt den Schatten nach rechts, ein negativer Wert nach links.

  2. vertical-offset: Der Abstand in Pixeln, um den der Schatten vertikal vom Text versetzt sein soll. Ein positiver Wert verschiebt den Schatten nach unten, ein negativer Wert nach oben.

  3. blur-radius: Der Unschärfegrad, der auf den Schatten angewendet wird. Ein höherer Wert erzeugt einen weicheren Schatten, während ein niedrigerer Wert zu einem schärferen Schatten führt. Wenn dieser Wert auf 0 gesetzt wird, erhält der Schatten eine harte Kante.

  4. color: Die Farbe des Schattens. Dies kann ein beliebiger gültiger CSS-Farbwert sein, wie z.B. Hexcode, RGB, RGBA, HSL oder benannte Farbe.

Beispiel: Verwendung von text-shadow

h1 {
  text-shadow: 2px 2px 4px #000000;
}

In diesem Beispiel hat das <h1>-Element einen Schatten, der 2 Pixel nach rechts und 2 Pixel nach unten versetzt ist, mit einem Unschärferadius von 4 Pixeln und schwarzer Farbe.

Sie können auch negative Werte für horizontale und vertikale Versätze verwenden:

Beispiel: Verwendung negativer Werte

p {
  text-shadow: -1px -1px 2px #CCCCCC;
}

Dies erzeugt hellgraue, eingelassen wirkende Schatten, da sie um ein Pixel nach oben und links versetzt sind.

Durch Anpassung dieser Werte können Sie verschiedene Textschatten-Effekte für Ihre Designbedürfnisse erstellen.

Fortgeschrittene Textschatten-Techniken

Mehrfache Textschatten

Sie können mehrere Schatten auf ein einzelnes Textelement anwenden, indem Sie jeden Schatten durch ein Komma trennen. Dies ermöglicht es Ihnen, komplexere Schatteneffekte zu erstellen.

Beispiel: Verwendung mehrerer Schatten

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

In diesem Fall hat der Text einen roten Schatten mit 3px Unschärfe und einen blauen Schatten mit 5px Unschärfe. Die Schatten stapeln sich übereinander.

Einige kreative Verwendungsmöglichkeiten für mehrere Schatten sind:

  • Einen Neonglanz-Effekt erzeugen, indem ein dunklerer Schatten über einem helleren liegt
  • Einen 3D-Effekt simulieren, indem Schatten in entgegengesetzte Richtungen versetzt werden
  • Sowohl Schlag- als auch innere Schatten für mehr Stil hinzufügen

Bei der Kombination mehrerer Schatten ist es ratsam:

  • Die Anzahl der Schatten zu begrenzen, um den Text nicht zu überladen
  • Halbtransparente Farben zu verwenden, um eine bessere Vermischung zu ermöglichen
  • Die Unschärferadien für weichere oder schärfere Effekte nach Bedarf anzupassen

Textschatten und Pseudo-Elemente

Sie können Textschatten auf Pseudo-Elemente (::before und ::after) anwenden, um interessante Effekte zu erzeugen, ohne zusätzliche HTML-Elemente hinzuzufügen.

Beispiel: Hinzufügen eines 'Echo'-Effekts mit Pseudo-Elementen

h1::after {
  content: attr(data-text);
  position: absolute;
  text-shadow: 2px 2px 4px #000;
  top: 0;
  left: 0;
  z-index: -1;
}

Hier dupliziert das ::after Pseudo-Element den Textinhalt (unter Verwendung der attr()-Funktion), positioniert ihn hinter dem ursprünglichen Text und wendet einen Schatten an.

Sie können auch Textschatten mit anderen CSS-Eigenschaften auf Pseudo-Elementen wie transform, opacity oder filter für fortgeschrittenere Effekte kombinieren.

Textschatten und CSS-Animationen

Durch die Verwendung von CSS-Animationen können Sie Textschatten dynamisch gestalten. Sie können Eigenschaften wie Versatz, Unschärfe und Farbe animieren.

Beispiel: Schatten bei Hover animieren

h1 {
  transition: text-shadow .3s;
}

h1:hover {
  box-shadow: .5em .5em .8em rgba(255, .25, .25, .75);
}

In diesem Fall erhält die Überschrift beim Überfahren mit der Maus innerhalb von 0,3 Sekunden einen roten Glanz. Sie können auch Keyframes für komplexe Animationen verwenden:

Beispiel: Verwendung von Keyframes für komplexe Animationen

@keyframes pulse {
  from {
    box-shadow: .15em -.15em .35em rgba(255, .25, .25, .75);
  }
  via {
    box-shadow: .35em -.35em .55em rgba(255, .25, .25, .75);
  }
  until {
    box-shadow: .15em -.15em .35em rgba(255, .25, .25, .75);
  }
}

header {
  animation: pulse infinite ease-in-out;
}

Dies lässt die Überschrift endlos zwischen verschiedenen Schattierungen pulsieren. Bei der Animation von Überschriften:

  • Verwenden Sie Übergänge für einfache Hover-Effekte und Keyframes für komplexe.
  • Achten Sie auf die Leistung, da Unschärfen ressourcenintensiv sind.
  • Stellen Sie sicher, dass die Animation die Benutzererfahrung verbessert und nicht vom Inhalt ablenkt.