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

Beitrag lesen

problematische Seite

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

Der gravierende Unterschied der Anzahl der passenden Suchmaschinentreffer, ist wohl anderer Meinung.

text css inset > 10.000.000 Ergebnisse

text css engraved ~ 39.200 Ergebnisse

Die diversen Beispiele, die man dazu findet, sind immer mit serifenlosen Schriften und in Pastellfarben. Dann fallen die Ungenauigkeiten nicht auf.

Auch hier ist es eher umgekehrt, bei Serifen ist m.M.n. der Effekt noch besser.

Habe es in meinem Beispiel mal ausprobiert:

Dein folgendes Beispiel hier...

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;
}

... würde nur invertiert als inset/engraved durchgehen.