Markup

Letterpress- und Embosseffekte mit CSS

Letterpress-Effekt mit CSSMit 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;}
Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.