Letterpress- und Embosseffekte mit CSS
Mit wenigen CSS-Anweisungen erstellt man beeindruckende Texteffekte: Mittels text-shadow kann man so Letterpress- und Emboss-Effekte erzeugen, die man sonst nur aus Bildbearbeitungsprogrammen kennt.
Wie gehts’?
Jeder Schatten wird durch 4 Werte erzeugt: Versatz links – Versatz oben – Unschärfe (Blur) – Farbe.
Schatten nach innen erhält man durch negative Werte für den x-/y-Versatz.
Natürlich können auch mehrere Schatten definiert werden – man muss sie durch Kommas von einander trennen.
Je nach verwendeter Schriftart und gewünschte Effekt kann man den Versatz anpassen und erhält so Ergebnisse wie in den folgenden Beispielen und im Thumbnail zu Beginn des Beitrags.
Letterpress
Letterpress-Effekt
Das dazugehörende CSS sieht so aus:
.inset {text-shadow: -1px -1px 0px #202020, 1px 1px 0px #FFF;}
Emboss
Emboss-Effekt
Das dazugehörende CSS sieht so aus:
.inset {text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;}
Lichtschein
Wer mehr auf Neonfarben und Leuchtreklamen steht:
Leuchtreklame
Das dazugehörende CSS sieht so aus:
.inset {text-shadow: 0px 0px 10px #FFFF00, -1px -1px #000;}
