Anleitung zum Hinzufügen eines Schattens zu Text
In diesem Leitfaden erfahren Sie, wie Sie jedem Text auf Ihrer Seite einen Schatten hinzufügen können.
Hinzufügen von Schatten zu Text
In unserem Leitfaden zum Hinzufügen eines Schattens zu Boxen erfahren Sie, wie Sie jedem Element auf Ihrer Seite einen Schatten hinzufügen. Diese Technik fügt jedoch nur Schatten zu der umgebenden Box des Elements hinzu. Um einen Schlagschatten zum Text innerhalb der Box hinzuzufügen, benötigen Sie eine andere CSS-Eigenschaft — text-shadow
.
Die text-shadow
-Eigenschaft nimmt eine Anzahl von Werten:
- Den Versatz auf der x-Achse
- Den Versatz auf der y-Achse
- Einen Weichzeichnungsradius
- Eine Farbe
Im folgenden Beispiel haben wir den Versatz der x-Achse auf 2px, den Versatz der y-Achse auf 4px, den Weichzeichnungsradius auf 4px und die Farbe auf ein halbtransparentes Blau gesetzt. Experimentieren Sie mit den verschiedenen Werten, um zu sehen, wie sie den Schatten verändern.
<div class="wrapper">
<h1>Adding a shadow to text</h1>
</div>
h1 {
color: royalblue;
text-shadow: 2px 4px 4px rgb(46 91 173 / 0.6);
}
Hinweis: Es kann sehr leicht passieren, dass Text durch Textschatten schwer lesbar wird. Stellen Sie sicher, dass die getroffenen Entscheidungen Ihren Text dennoch lesbar machen und genügend Farbkontrast für Besucher bieten, die Schwierigkeiten mit kontrastarmem Text haben.