Eingeprägter schwarzer Text in weißen Untergrund mit text-shadow

[Rolf B]

Hallo Radi,

das Stichwort für "eingeprägt" ist eigentlich nicht "inset", sondern "embossed" oder "engraved".

Das funktioniert mit CSS aber nicht wirklich gut, weil ein Schatten immer hinter dem Objekt liegt. Eigentlich brauchst Du etwas, was VOR dem Objekt liegt, aber nur am Rand. Die diversen Beispiele, die man dazu findet, sind immer mit serifenlosen Schriften und in Pastellfarben. Dann fallen die Ungenauigkeiten nicht auf. Ob man es mit SVG Filtern besser kann, bezweifle ich - eine richtig gute Umsetzung habe ich nicht gefunden.

Man kann durch den Einsatz von Blur-Radius drei Schatten bei transparentem Text noch diesen Effekt erreichen. Der eigentlich Text wird dadurch rundum etwas verkleinert, so dass oben links die hellen Schatten und unten rechts die dunklen Schatten hervorschauen. Ganz perfekt ist es aber an den Ecken immer noch nicht, und eine Serifenschrift sieht sch...eußlich aus.

h1.engrave {
   font: bold 5rem sans-serif;
   padding: 0.2em 0.5em;
   background: #888;
   color:transparent;
   text-shadow: 0 0 2px #aaa, 2px 2px 2px #000, -2px -2px 2px #fff;
}

Rolf