Trick # 503 | Dieser Beitrag beinhaltet 503 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Neulich hat uns ein Mail erreicht: Darin war die Frage enthalten, wie sich Texte als Prägung auf der Website darstellen lassen. Natürlich ist das mit einem Grafikprogramm schnell gemacht – aber noch eleganter lösen wir dies mittels CSS-Code.
Der Code ist kurz und knapp. Kopieren Sie den Block und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein – in WordPress etwa unter Design/Customizer/Zusätzliches CSS:
.embossing {
color:#222222;
text-shadow: 0px 2px 3px #666666;
}background-color, mit padding mit font-weight oder font-size … unbegrenzt sind die Möglichkeiten. Und natürlich können Sie auch mit den Farben spielen.
Weil unser CSS-Code die Klasse embossing anspricht, muss diese freilich auch dem betreffenden Text zugewiesen werden. Zum Beispiel so:
<p class="embossing">Lorem ipsum dolor sit amet.</p>Das sieht dann in einem Beispiel so aus:
Lorem ipsum dolor sit amet.
Das funktioniert natürlich auch mit einem edlen Lederhintergrund:
Lorem ipsum dolor sit amet.
Werbung
Werbung
