Einführung in Textschatten

Jeder Schatten umfasst in dieser Reihenfolge einen horizontalen Versatz, einen vertikalen Versatz und einen optionalen Unschärferadius. Außerdem können Sie die Farbe des Schattens definieren.

Der erste <length> im Wert von text-shadow repräsentiert den horizontalen Versatz des Schattens im Verhältnis zum ursprünglichen Text. Positive Werte verschieben den Schatten nach rechts, während negative Werte ihn nach links verschieben. Ein Wert von 0 ist ein häufiger gültiger Wert.

In diesem Beispiel unterscheiden sich die verschiedenen text-shadow-Deklarationen nur in ihren horizontalen Versätzen. Der erste <length>-Wert verschiebt den Schatten nach links (-30px) oder nach rechts (30px).

.negative {
  text-shadow: -30px 0 1px red;
}

.positive {
  text-shadow: 30px 0 1px red;
}

.zero {
  text-shadow: 0 0 1px red;
}

<p class="negative">Negative</p>
<p class="positive">Positive</p>
<p class="zero">Zero</p>

p {
  border: 1px solid;
  padding: 20px;
  font-family: sans-serif;
  font-size: 1.25rem;
}

Sie haben vielleicht bemerkt, dass die text-shadow-Eigenschaft keine Auswirkung auf das CSS-Boxmodell hat, ähnlich wie die outline-Eigenschaft. Genau wie box-shadow beeinflussen Textschatten weder das Layout, noch verursachen sie Scrollen oder wirken sich auf die Größe des scrollbar überlaufenden Bereichs aus. Obwohl Textschatten den Text eines Elements größer erscheinen lassen können, haben sie keine tatsächliche Auswirkung auf die Breite (oder Höhe) des Inhalts.

Der zweite <length> im Wert von text-shadow repräsentiert den vertikalen Versatz des Schattens im Verhältnis zum ursprünglichen Text. Dieser erforderliche Wert verhält sich ähnlich wie der horizontale Versatz, außer dass er den Schatten nach oben oder unten statt nach links oder rechts verschiebt.

In diesem Beispiel unterscheiden sich die text-shadow-Deklarationen nur in ihren vertikalen Versätzen. Der zweite <length>-Wert verschiebt den Schatten nach oben (-30px) oder nach unten (30px).

.negative {
  text-shadow: 0 -30px 1px red;
}

.positive {
  text-shadow: 0 30px 1px red;
}

.zero {
  text-shadow: 0 0 1px red;
}

Der Unschärferadius wird durch den dritten <length>-Wert definiert und ist optional. Wenn er weggelassen wird, beträgt der Unschärferadius 0, was eine Kopie des Textes erzeugt, die durch die ersten beiden Längenwerte positioniert wird. Der Wert muss 0 oder größer sein; je größer der Wert, desto weiter verbreitet ist der Schatteneffekt.

In diesem Beispiel unterscheiden sich die text-shadow-Deklarationen nur in ihren Unschärferadien. Dieser dritte <length>-Wert ist entweder ungültig (-5px), verwischt den Schatten (5px) oder erzeugt eine Kopie des Textes (0).

.negative {
  /* invalid */
  text-shadow: 30px 30px -5px red;
}

.positive {
  text-shadow: 30px 30px 5px red;
}

.zero {
  text-shadow: 30px 30px 0 red;
}

Obwohl Sie mehrere Schatten auf Text anwenden können, besteht jeder Schatten aus einer einzigen Basisfarbe. Diese Farbe kann jeder gültige CSS-color-Wert sein und wird, falls weggelassen, auf currentcolor standardisiert.

Die folgenden drei Schatten sind hinsichtlich ihrer Schattenfarben gleichwertig:

.shadow-color {
  text-shadow:
    5px 5px mediumblue,
    10px 10px magenta,
    15px 15px rebeccapurple;
}

.shadow-color-hex {
  text-shadow:
    5px 5px #0000cd,
    10px 10px #ff00ff,
    15px 15px #663399;
}

.shadow-color-rgb {
  text-shadow:
    5px 5px rgb(0 0 205),
    10px 10px rgb(255 0 255),
    15px 15px rgb(102 51 153);
}

Sie können mehrere Schatten auf denselben Text anwenden, indem Sie mehrere durch Kommas getrennte Schattenwerte hinzufügen.

Die Schattierungseffekte werden von vorne nach hinten angewendet: Der erste Schatten liegt oben.

In unserem Beispiel von text-shadow: 5px 5px mediumblue, 10px 10px magenta, 15px 15px rebeccapurple; werden drei Schatten definiert, wobei der blaue oben auf dem rosa liegt, der wiederum oben auf dem lila liegt:

p {
  text-shadow:
    5px 5px mediumblue,
    10px 10px magenta,
    15px 15px rebeccapurple;
}

<p>I have three shadows</p>

Schatten werden über alle Hintergrundfarben oder -bilder und unter allen Rahmenfarben gemalt. Während sich Schatten gegenseitig überlagern, überlagern sie nicht den Text. Es gibt kein Äquivalent zum Schlüsselwort inset der box-shadow-Eigenschaft in der Welt der Textschatten. Anders als bei einem Box-Schatten werden Textschatten nicht auf die geschattene Form zugeschnitten und können durchscheinen, wenn der Text teilweise transparent ist.

Die folgenden Beispiele wenden dieselben Schatten auf den Text an, aber mit unterschiedlichen color-Eigenschaftenwerten. Die halbtransparenten Beispiele sind schwer zu lesen, werden jedoch inkludiert, um zu demonstrieren, wie Schatten gerendert werden:

p {
  text-shadow:
    5px 5px 0 mediumblue,
    10px 10px 5px magenta,
    15px 15px 10px rebeccapurple;
}

.opaque {
  color: black;
}

.semitransparent {
  color: rgb(0 0 0 / 0.5);
}

.transparent {
  color: transparent;
}

.white {
  color: white;
}

.semi-white {
  color: rgb(255 255 255 / 0.75);
}

<p class="opaque">The text is opaque black</p>
<p class="semitransparent">The text is semiopaque black</p>
<p class="transparent">The text is transparent black</p>
<p class="white">The text is opaque white</p>
<p class="semi-white">The text is semiopaque white</p>

p {
  border: 1px solid black;
  padding: 20px;
  font-family: sans-serif;
  font-size: 1.75rem;
  font-weight: bold;
}

Im "transparenten" Beispiel ist der Text transparent, bleibt aber voll lesbar, da der obere Schatten nicht verwischt ist. Beachten Sie, wie der Schatten hinter dem Text erscheint und sichtbar ist, wenn der Text nicht völlig undurchsichtig ist. Dies ist besonders im "halbundurchsichtigen Weißen" Beispiel bemerkenswert. Dieses Verhalten unterscheidet sich von nicht-eingefügten Box-Schatten, bei denen die Schatten am äußeren Rand des Rahmens abgeschnitten werden.