Wie man Knockout-Text macht

Es gibt ein paar Möglichkeiten, um Knockout-Text (Text, der ausgeschnitten erscheint, sodass man einen Hintergrund dahinter sehen kann) im Web zu erstellen. Es gibt eine ziemlich neue Methode, die eine recht gute Browserunterstützung hat und sehr interessant ist. Aber lass uns das gesamte Feld abdecken.

Einfach mit Photoshop

Wie bei allem anderen kann man es einfach mit einer flachen Grafik faken. Manchmal lohnt es sich, das Offensichtliche zu behandeln. Die Nachteile sind, dass es nicht dynamisch/schwer zu ändern ist. Man kann den Text nicht kopieren und einfügen. Bilder können groß in der Dateigröße sein, besonders wenn man um höhere Auflösung kämpft. Etc. etc. Aber man kann es machen und es wird überall funktionieren

-webkit-background-clip: text;

Dies ist eine nicht standardisierte Eigenschaft, aber sie wurde erfunden, um genau das zu tun. Das Schöne ist, dass man sie mit -webkit-text-fill-color: transparent; kombinieren kann, so dass man den Text nur in einem Browser "versteckt", der das Clipping beherrscht. Divya Manian hat dies vor einigen Jahren dokumentiert.

.clip-text-maybe {
  
  /* if we can clip, do it */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

  /* what will show through the text
      ~ or ~
     what will be the background of that element */
  background: whatever;

  /* fallback text color
      ~ or ~
     the actual color of text, so it better work on the background */
  color: red;
 
}

Dies ist echter Webtext, mit dem kommen alle Zugänglichkeit, Suchbarkeit, leichte Änderbarkeit und alles dazugehörige.

Hier sind einige lustige Beispiele für diese Methode, von Jintos

Siehe den Stift -webkit-background-clip:text CSS effect von Jintos (@Jintos) auf CodePen.

Wie jeder andere Hintergrund kann man seine Position fixieren, wenn das wünschenswert ist. Hier ist eine Demo davon von Richard Hayes

Siehe den Stift Webkit Clip with Fixed Background von Richard (@strawstack) auf CodePen.

SVG <pattern> Füllung

SVG kann auch echten Text haben, durch sein <text> Element. SVG-Text kann mit allem gefüllt werden, einschließlich eines Musters. Und ein Muster kann ein Bild verwenden. Also… Knockout-Text!

Ein Beispiel dafür wäre

<svg>
  <pattern id="pattern" patternUnits="userSpaceOnUse" width="750" height="800">
    <image width="750" height="800" xlink:href="image.jpg"></image>
  </pattern>
  <text x="0" y="80" class="headline" style="fill:url(#pattern);">background-clip: text | Polyfill</text>
</svg>

Das könnte man direkt in HTML überall verwenden. Hier ist ein Beispiel dafür von C.Y. Park

Siehe den Stift SVG Text Clip with Gradient & GIF von C.Y. Park (@cypark) auf CodePen.

Lea Verou hat diese Technik auch dokumentiert.

CSS mit SVG polyfillen

Tim Pietrusky hat einen Polyfill für -webkit-background-clip erstellt, der die SVG-Methode als Fallback verwendet. Die CSS-Version ist sicherlich einfacher und schneller zu schreiben als die SVG-Version, daher scheint dies ein guter Weg zu sein, um trotzdem eine bessere Browserunterstützung zu erhalten.

Siehe den Stift -webkit-background-clip: text Polyfill von Tim Pietrusky (@TimPietrusky) auf CodePen.

mix-blend-mode: screen;

Das ist die neue Methode, die ich vorher nicht kannte! CSS-Blending ist ziemlich neu. Es erlaubt Ihnen, Elemente über anderen Elementen zu überlagern, wie Sie Stile in Photoshop schichten würden (z. B. "screen", "multiply", "lighten" usw.)

Richtig gemacht, kann man ein Bild direkt über Text überlagern, ohne den "echten" Hintergrund zu beeinträchtigen. Ich habe Giana das zuerst auf CodePen machen sehen

Siehe den Stift CSS Gradient Text in Firefox von Giana (@giana) auf CodePen.

Es funktioniert so

1. Machen Sie den Text schwarz.
2. Bedecken Sie den gesamten Text mit dem neuen Text-Hintergrund und mix-blend-mode: screen;
3. Bedecken Sie das dann mit einer neuen Kopie desselben Textes (in Weiß) und demselben Hintergrund wie die Seite und mix-blend-mode: multiply;

Das lässt nur den Text mit dem "Knockout"-Hintergrund sichtbar. Wenn Sie pointer-events verwenden, können Sie den Text auch klickbar und auswählbar lassen, obwohl es schwer ist, zu sehen, was Sie tun.

Der Vorteil ist, dass dies eine reine CSS-Methode ist, die sowohl in Firefox als auch nicht nur in -webkit-Sachen funktioniert.