text-shadow ist der Schatten hinter Text. Sparsam eingesetzt verbessert er die Lesbarkeit auf Bildern, großzügig eingesetzt verschlechtert er sie.
- text-shadow
Eigenschaft, die einen Schatten hinter die Buchstaben eines Textes legt.
Beispiel: „Ein text-shadow folgt den Buchstaben, nicht der Box.“
Der nützliche Fall
.auf-bild {
text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}Text auf einem Foto. Ein weicher dunkler Schatten hebt die Buchstaben vom unruhigen Untergrund ab und verbessert die Lesbarkeit messbar. Besser ist meistens trotzdem eine halbdurchsichtige Fläche hinter dem Text.
Der Rest
Schatten an gewöhnlichem Fließtext verringern den Kontrast und machen die Schrift unscharf. Was in den 2000er Jahren als Verzierung üblich war, gilt heute als Zeichen für ein altes Design.