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

problematische Seite

Das Beispiel text-shadow: 2px 2px 2px white, 5px 5px 10px black; im selfhtml-Wiki (scrollt bitte zum Beispiel der CSS Klasse fuenf) kommt meinem Ziel schon etwas nahe. Durch den zweiten weißen Schatten entsteht der Charakter einer Prägung. Aber ich schaffe es nicht es so zu abzuwandeln dass es realitätsnah wie eine Prägung aussieht.

Ich hab leider kein Beispiel-Bild gefunden: Es soll aussehen wie schwarzer Text der einige Millimeter in eine weiße Plastiktafel eingeprägt wurde. Mit abgerundeten, keinen scharfen Kanten an den Prägevertiefungen.

Durch den dadurch entstehenden plastischen Eindruck will ich meine Überschriften interessanter wirken lassen.

  1. problematische Seite

    Hej Radi,

    Ich hab leider kein Beispiel-Bild gefunden: Es soll aussehen wie schwarzer Text der einige Millimeter in eine weiße Plastiktafel eingeprägt wurde. Mit abgerundeten, keinen scharfen Kanten an den Prägevertiefungen.

    Vielleicht so etwas wie beim Beispiel „inset“ auf dieser Seite mit Beispielen für text-shadow?

    Für mehr Beispiele kannst du nach Beispielen für text-shadow suchen.

    Ich hoffe, da ist etwas für dich dabei…

    Marc

    --
    Ceterum censeo Google esse delendam
    1. problematische Seite

      Guter Tipp. Die abgerundeten Kanten fehlen mir jedoch. Dadurch sollen die Überschriften modern aussehen und nicht wie in Stein gemeißelt.

      1. problematische Seite

        Googeln ist ein guter Tipp. Gestern fand ich jedoch nichts passendes. Die meisten Beispiele ließen Text hervorstehen und nicht in den Untergrund einsinken.

        Aber ich googel mal weiter.

        1. problematische Seite

          Hallo,

          Googeln ist ein guter Tipp. Gestern fand ich jedoch nichts passendes. Die meisten Beispiele ließen Text hervorstehen und nicht in den Untergrund einsinken.

          nur mal so ins Blaue gedacht: Ob eingeprägt oder erhaben - eins ist ja quasi ein Negativ des anderen. Also denke ich, man müsste von der erhabenen Darstellung ausgehen, eine dunkle Schriftfarbe wählen und die Schattenstufen von der Schriftfarbe ausgehend heller statt dunkler werden lassen.

          Eventuell auch die Offsets invertieren ...

          Aber ich googel mal weiter.

          Das kann auch nicht schaden.

          Ciao,
           Martin

          --
          Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.
          1. problematische Seite

            Hej Der Martin,

            nur mal so ins Blaue gedacht: Ob eingeprägt oder erhaben - eins ist ja quasi ein Negativ des anderen.

            das Schlüsselwort inset ist das wichtigste - im Gegensatz zum (meist ungeschriebenen, aber impliziten default-Wert…

            Marc

            --
            Ceterum censeo Google esse delendam
      2. problematische Seite

        Hallo Radi,

        Die abgerundeten Kanten fehlen mir jedoch.

        Die sollten die Buchstaben weitestgehend mitbringen.

        Bis demnächst
        Matthias

        --
        Pantoffeltierchen haben keine Hobbys.
        ¯\_(ツ)_/¯
        1. problematische Seite

          @@Matthias Apsel

          Die abgerundeten Kanten fehlen mir jedoch.

          Die sollten die Buchstaben weitestgehend mitbringen.

          Die Calibri hat recht runde Ecken. (Öhm …) Und natürlich die VAG Rounded. Die Signika teilweise auch.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      3. problematische Seite

        Hej Radi,

        Guter Tipp. Die abgerundeten Kanten fehlen mir jedoch.

        An den Feinheiten musst du freilich selber feilen. Wer soll schon wissen, wie du dir das im Detail vorstellst? 😉

        Auch Farben, Verläufe usw…

        Ich empfehle übrigens rgba oder hsla für weiche Übergänge…

        Bei extensivem Gebrauch könnte sich das auf die Performanz auswirken, mal auf einem alten Smartphone testen, wenn möglich…

        Marc

        --
        Ceterum censeo Google esse delendam
  2. problematische Seite

    Hallo,

    und das ist also nicht was du meinst?

    lg.

    1. problematische Seite

      Hallo Lisa,

      und das ist also nicht was du meinst?

      Ihm fehlen die abgerundeten Kanten.

      Btw:

      Im unteren Beispiel erkenne ich keinen Innenschatten. Das kann natürlich auch an meiner Wahrnehmung liegen.

      Bis demnächst
      Matthias

      --
      Pantoffeltierchen haben keine Hobbys.
      ¯\_(ツ)_/¯
      1. problematische Seite

        Hallo,

        und das ist also nicht was du meinst?

        vielleicht meint er sowas in der Art, möchte aber nicht den großen Werkzeugkasten SVG auspacken.

        Ihm fehlen die abgerundeten Kanten.

        Ich habe bisher noch nicht verstanden, was er damit meint. Abgerundete Konturen der Zeichen? Die ergeben sich bei Buchstaben wie O oder S ganz von allein, bei Buchstaben wie H oder M wären sie unangebracht.
        Oder meint er die Unschärfe des Schattens? Die entsteht auch recht schmerzfrei, indem man dem blur-Parameter von text-shadow einen Wert >0 gibt (oder dem entsprechenden Wert im SVG).

        Im unteren Beispiel erkenne ich keinen Innenschatten. Das kann natürlich auch an meiner Wahrnehmung liegen.

        Ich erkenne schon einen. Aber er ist weiß. ;-)

        Schönen Abend,
         Martin

        --
        F: Wieviele Softwareentwickler braucht man, um eine Glühlampe auszuwechseln?
        A Keinen. Das ist ein Hardwareproblem.
        1. problematische Seite

          Mit abgerundeten Kanten meine ich, dass wenn man mit dem Finger drüberfahren "könnte", nirgendwo scharfe Kanten zu spüren wären. Weil alle 90° Kanten "rundgefeilt" wurden.

          1. problematische Seite

            Hallo,

            Mit abgerundeten Kanten meine ich, dass wenn man mit dem Finger drüberfahren "könnte", nirgendwo scharfe Kanten zu spüren wären. Weil alle 90° Kanten "rundgefeilt" wurden.

            dann versuch's mal mit meinem Hinweis, die Textfarbe selbst auf transparent zu setzen, so dass du nur noch die Schattenstufen siehst. Die sind dann alle etwas verwischt.

            So long,
             Martin

            --
            Computer müssen weiblich sein: Eigensinnig, schwer zu durchschauen, immer für Überraschungen gut - aber man möchte sie nicht missen.
            1. problematische Seite

              Das hat was. Auch in Kombination mit einer Hintergrundfarbe. Der Text erscheint dann bei mir weiß wegen des weißen <body>.

              1. problematische Seite

                @@Radi

                Das hat was. Auch in Kombination mit einer Hintergrundfarbe. Der Text erscheint dann bei mir weiß wegen des weißen <body>.

                Ich glaube nicht so recht daran, dass es auf weißem Hintergrund gelingt, Text eingraviert aussehen zu lassen.

                Der Effekt entsteht durch Licht und Schatten: Berg oder Tal?

                Da Licht üblicherweise von oben fällt, sieht die erste Zeile erhaben aus. Die zweite Zeile hat Licht und Schatten vertauscht; sie kann eingraviert aussehen – oder auch erhaben, aber von unten beleuchtet.

                Mit weißem Hintergrund sähe das so aus.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. problematische Seite

                  Hallo,

                  Ich glaube nicht so recht daran, dass es auf weißem Hintergrund gelingt, Text eingraviert aussehen zu lassen.

                  problemlos, solange die Textfarbe nicht auch weiß ist.

                  lg.

    2. problematische Seite

      Nein, das meine ich nicht. Das könnte ich mir aber vorstellen wenn ich den Eindruck von abgerundeten Kanten (also keinen 90° Kanten) wirklich nicht hinbekomme per text-shadow. Dein Vorschlag wäre also Platz 2 auf meiner Favouriten-Liste. Danke dafür.

      1. problematische Seite

        Hej Radi,

        Dein Vorschlag wäre also Platz 2 auf meiner Favouriten-Liste.

        Gibt es ein Bild mit dem, was du erreichen möchtest?

        Bin echt gespannt…

        Wenn du es hinbekommen hast, zeig es doch mal bitte.

        Was hast du denn schon alles probiert?

        Marc

        --
        Ceterum censeo Google esse delendam
  3. problematische Seite

    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

    --
    sumpsi - posui - clusi
    1. 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.

      1. problematische Seite

        Hallo Lisa,

        hmm, ja, emboss heißt zwar prägen, aber man kann ja zweierlei prägen: den Text oder seine Umgebung. Im Ergebnis hat man dann erhabenen oder vertieften Text. Wenn der übliche Gebrauch so ist, dass der Text am Ende erhaben ist, bin ich da wohl reingefallen.

        Ob etwas vertieft oder erhaben aussieht, ist bei solchen Darstellungen übrigens nicht immer erkennbar. Platziert man die imaginäre Lampe diagonal gegenüber, tauschen vertieft und erhaben die Rollen, wenn der Effekt korrekt ist.

        Das ändert aber nichts daran, dass die ganzen Beispiele, die das mit Schatten lösen, einen "schwebenden" Eindruck machen. Entweder schwebt der Text über dem Hintergrund oder, wie in deinem Beispiel, schwebt eine Fläche mit dem ausgeschnittenen Text über einem dunkleren Hintergrund. Das ist keine Prägung, die hat keine mMn keine Flanken mit 90° Steigung, sondern eine Ausfräsung. Aber selbst das passt bei dir nicht, im x sind Schatten auf der falschen Seite, weil dein simuliertes Licht sehr diffus ist.

        Da fällt bei Serifenschriften und bei stärkeren Kontrasten deutlicher auf, mir kommt die Darstellung eines "vertieft" oder "erhaben" Effektes dann eindeutig falsch vor.

        Ich will damit nicht sagen, dass das grundsätzlich schlecht aussieht. Es ist nur nicht der angefragte Effekt, es ist ein anderer.

        Ich will auch nicht sagen dass mein Beispiel das sauber löst. Es hat prinzipbedingt die gleichen Probleme.

        Rolf

        --
        sumpsi - posui - clusi
    2. problematische Seite

      @@Rolf B

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

      „Embossed“ ist ausgeprägt.

      Ob man es mit SVG Filtern besser kann, bezweifle ich

      Das war meine zweite Idee, nachdem ich nachgeschlagen hatte, ob es inset auch für text-shadow gibt (nein, gibt’s nicht). Mit SVG sollte man das doch aber hinbekommen?

      und eine Serifenschrift sieht sch...eußlich aus.

      ?? Das verstehe ich nicht.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann