This article has been localized into German by the community.
Text Schattierung
In CSS3 wurde eine neue Funktion eingeführt - der Textschatten! Bei Verwendung der Eigenschaft text-shadow haben wir die Kontrolle über drei Dinge: die Farbe, die Platzierung und die Unschärfe. Dies bedeutet, dass es vier Werte gibt:
- color (Farbe)
- x-Koordinate
- y-Koordinate
- Unschärfe-Radius
Sie können beim Definieren der Farbe entweder HEX-Farben oder RGBa-Farben verwenden. Die Koordinaten basieren auf der Platzierung des Texts und können positiv oder negativ sein. Das Ausmaß der Unschärfe definiert, wie verwaschen Ihr Schatten ist.
Hier ist ein Beispiel:
<style>
.simpleShadow {
color: #000;
font-size: 2em;
text-shadow: 1px 1px 5px #fff;
}
</style>
<p class="simpleShadow">Simple shadow effect</p>Okay, jetzt wissen Sie, dass es möglich ist, Hintergründe zu Ihrem Text hinzuzufügen, aber es ist nicht wirklich beeindruckend, oder? Nun, aus diesem Grund habe ich einige ausgefallene Textschatten-Effekte eingefügt, um Ihnen einige der Möglichkeiten zu zeigen (und sie sind reichlich vorhanden!).
Geprägt!
Jetzt sind Sie beeindruckt, oder? So sieht das CSS für diese Art von Typografie aus. Oh, und bitte beachten Sie, dass Sie tatsächlich jedem Element mehrere Textschatten hinzufügen können. In diesem Beispiel habe ich eine weiße (-1px -1px 1px #fff) und eine schwarze (2px 2px 1px # 000) hinzugefügt. Wenn Sie diesen Stil verwenden, müssen Sie die Farbe der Schriftart in eine Farbe ändern, die Ihrem Hintergrund entspricht
Lichter der Stadt!