CSS-Techniken und Effekte für Knockout-Text

Knockout-Text ist eine Technik, bei der Wörter aus einem Element ausgeschnitten werden und den Hintergrund freigeben. Mit anderen Worten, Sie sehen nur den Hintergrund, weil die Buchstaben Löcher ausstanzen. Es ist ansprechend, da es typografische Stile eröffnet, die wir mit herkömmlichen CSS-Eigenschaften wie color nicht erzielen können.

Während wir in der Vergangenheit eine Reihe von Möglichkeiten gesehen haben, Knockout-Text zu realisieren, gibt es heute moderne CSS-Eigenschaften, die wir verwenden und den Effekt sogar weiter verbessern können, wie z. B. Übergänge und Animationen. Sehen wir sie in Aktion.

Mix-Blend-Modi

Es gibt vier Mischmodi, die mühelos Texte ausschneiden: multiply, screen, darken und lighten. Wenn Sie diese auf das oberste Element eines Stapels aus Bild und Text anwenden, wobei der Text oben liegt, entsteht das Knockout-Design.

Auch wenn in den meisten Fällen Schwarz oder Weiß in diesen Mischmodi verwendet wird, um eine klare Unterscheidung zwischen Text und Hintergrund zu erzielen, verwende ich lieber eine dunklere oder hellere Farbe, um das hintere Bild noch leicht sichtbar zu halten, wie hier

<div class="backdrop">
  <p class="text">Taitō</p>
</div>

/* Background layer with an image */
.backdrop {
  background: url("/path/to/image.jpg") center;
  ...
}
    
/* Dark foreground layer, with white text, set to "multiply" mix blend mode */
.text {
  color: white;
  background: rgb(59, 2, 6);
  mix-blend-mode: multiply;
  ...
}

Siehe den Pen CSS Knockout Text von Preethi (@rpsthecoder) auf CodePen.

Die Verwendung einer dunkleren (oder helleren) Farbe erzeugt auch ein schönes "Thema" mit dem durch den Text sichtbaren Bild.

Der Mischmodus **multiply** behält dunkle Farben bei, während helle Farben das durchlassen, was sich dahinter befindet: Ein schwarzer Bereich auf der oberen Ebene ist vollständig opak und Weiß ist vollständig transparent.

Im obigen Beispiel wurde der weiße Text vollständig durchsichtig, während die dunklere Farbe darum herum das darunter liegende Bild nur wenig durchscheinen lässt, da die dunkleren Schattierungen unbeeinflusst bleiben.

Der **screen**-Mischmodus kehrt die Rollen um: Dunkle Farben erzeugen Transluzenz, während helle Schattierungen hell bleiben und das dahinterliegende blockieren.

Die Mischmodi **darken** und **lighten** sind ähnlich wie multiply und screen, mit der Ausnahme, dass Details in den sichtbaren Bereichen des hinteren Bildes verloren gehen. Anstatt die Schattierungen zu mischen, wählen die Modi die dunklere oder hellere Schattierung der beiden sichtbaren Ebenen aus.

Sehen Sie unten den Unterschied, wie die vier Modi die Farben gemischt haben

/* Knockout text within a dark area */
.multiply {
  color: white;
  mix-blend-mode: multiply;
  background-color: rgb(59, 2, 6);
}

/* Knockout text within a bright area */
.screen {
  color: black;
  mix-blend-mode: screen;
  background-color: rgb(244, 220, 211);
}

/* Knockout text within a dark area that's less detailed */
.darken {
  color: white;
  mix-blend-mode: darken;
  background-color: rgb(59, 2, 6);
}

/* Knockout text within a light area that's less detailed */
.lighten {
  color: black;
  mix-blend-mode: lighten;
  background-color: rgb(244, 220, 211);
}

Siehe den Pen CSS Knockout Text von Preethi (@rpsthecoder) auf CodePen.

Die Verwendung eines Mischmodus ist die bequemste Option, um einen Knockout-Texteffekt zu erzielen, da sie uns zusätzliche Stile ermöglicht, die andere Techniken möglicherweise nicht zulassen.

Werfen wir einen genaueren Blick auf die Stile, die wir verwenden können, um den Knockout-Effekt zu verbessern.

Schattenweichzeichnung

Das Hinzufügen eines weißen/schwarzen oder eines hellen/dunklen Textschattens zum Text erzeugt einen Weichzeichnungseffekt. Zum Beispiel, sagen wir, ich füge einen text-shadow mit einem großen Weichzeichnungsradius hinzu

.text {
  text-shadow: 0 0 9px white;
  ...
}

Jetzt sind die Kanten weniger scharf und ergeben einen Art Wolkeneffekt

Siehe den Pen CSS Blurred Knockout Text von Preethi (@rpsthecoder) auf CodePen.

Animation

Wir können Dinge sogar ein wenig bewegen. Zum Beispiel können wir die Idee des text-shadow, die wir oben betrachtet haben, aufgreifen und etwas Bewegung darauf anwenden, um den Eindruck zu erwecken, dass der Text leuchtet

.text {
  animation:  glow 3s infinite;
  ...
}

@keyframes glow {
  0% {
    text-shadow:  0 0 10px white;
  }
  
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
  50% {
    text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
                 -20px -20px 50px rgba(255, 255, 255, .5);
  }
}

Siehe den Pen CSS knockout Text Glow Animation von Preethi (@rpsthecoder) auf CodePen.

Übergang

Übergang ist eine weitere Eigenschaft, die wir auf unseren Knockout-Text anwenden können und die noch interessantere Möglichkeiten eröffnet, wie z. B. die Verwendung von text-indent auf Pseudoklassen wie :hover.

Hier erfahren Sie, wie wir Übergänge auf Pseudoklassen verwenden können, um ein neues Element in den Knockout-Text einzuführen

/* The knockout text */
.text {
  transition: text-indent .5s;
  ...
}

/* On hover, trigger the transition */
.text:hover {
  text-indent: 5px;
  transition: text-indent .5s;
}

/* The thing that slides in on hover */
.text:hover::before {
  display: inline-block;
  content: '✈︎';
}

Siehe den Pen CSS Knockout Text Transition von Preethi (@rpsthecoder) auf CodePen.

Hintergrund-Clip

Die CSS-Eigenschaft background-clip, gesetzt mit dem Wert text, schneidet einen Hintergrund auf die Form seines vordergründigen Textes zu.

<p class="text">Taitō</p>

.text {
  background: url("/path/to/image.jpg") center;
  background-clip: text;
  color: transparent;
  ...
}

Siehe den Pen Knockout Text von Preethi (@rpsthecoder) auf CodePen.

Der transparente Text zeigt das darunter liegende Bild, das bereits an die Form des Textes angepasst ist. Obwohl dies ein echter Knockout-Texteffekt ist – er entfernt buchstäblich den umgebenden Hintergrund des Textes auf dem Bildschirm –, lässt das Fehlen eines Hintergrunds zum Überblenden oder Überlagern wenig Raum für andere Effekte wie Weichzeichnung oder bewegten Text. Hier hat mix-blend-mode einen Vorteil.

CSS-Maske

Die erste Technik, die wir betrachtet haben, verwendet **Maskierung**, ein Konzept, bei dem Formen auf einer Vordergrundebene erstellt werden und Farbe verwenden, um zu bestimmen, wie viel der Form den Hintergrund freigibt. Die schwarzen Teile des Vordergrunds verdecken (oder "maskieren") und die weißen Teile geben den Hintergrund frei, oder umgekehrt. Jeder Grauwert zwischen Schwarz und Weiß wird als unterschiedliche Grade teilweiser Transparenz behandelt.

CSS-Masken funktionieren genauso: Sie deklarieren direkt ein Bild als Maske, die über ein anderes Bild gelegt wird, und je nach Art der Maske erhalten wir einen ausgeschnittenen Bereich. Zum Zeitpunkt der Erstellung dieses Beitrags ist die CSS-Maske nur in Firefox vollständig unterstützt.

Da wir uns speziell mit Knockout-Text beschäftigen, muss die Maske aus Text bestehen. Dies ist eine großartige Verwendung für SVG <mask>, das Masken aus SVG-Formen und Texten erstellen kann.

<div class="backdrop">
  <p class="text"></p>
</div>

<svg>
  <defs>
    <mask id="m">
      <rect width="100%" height="100%" fill="white" />
      <text x="50%" y="75%" text-anchor="middle">Taitō</text>
    </mask>
  </defs>
</svg>

/* Background layer with an image */
.backdrop {
  background:  url("/path/to/image.jpg") center;
  ...
}

/* Dark foreground layer with masking applied */
.text {
  background-color: rgba(59, 2, 6, 1);
  mask-type: luminance;
  /* Referrer to an SVG mask */
  mask: url("#m");              
  ...
}

svg {
  width: 75vw;
  height: 20vw;
}

/* SVG text inside the mask */
text {
  font: bolder 12vw 'Alfa Slab One';
}

Siehe den Pen Knockout Text von Preethi (@rpsthecoder) auf CodePen.

Der Wert luminance der Eigenschaft mask-type des Vordergrundelements implementiert einen Maskierungsmechanismus, bei dem Teile dieser Ebene, die den schwarzen Teilen der Maske entsprechen, transparent werden. Die Teile, die den weißen Teilen der Maske entsprechen, bleiben opak. Die Eigenschaft mask verwendet den Wert url(), um das für die Maske verwendete SVG-Element zu bezeichnen.

Das SVG-Element <mask> erstellt eine Maske aus seinem Inhalt. Der von mir im <mask> erstellte Inhalt ist ein weißes Rechteck (<rect>) und schwarzer Text (<text>). Der Text, der schwarz ist, bringt den Teil des dahinterliegenden Bildes nach der Maskierung in Sicht.

Weichzeichnung, Animation und Übergang

CSS-Masken eröffnen die gleichen Weichzeichnungs- und Animationseffekte, die wir mit mix-blend-mode erzielen konnten.

Die gleiche leuchtende Textwirkung, die wir zuvor verwendet haben, gilt auch hier und wird diesmal direkt auf das <text>-Element des SVG angewendet.

text {
  font: bolder 12vw 'Alfa Slab One';
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }
  
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
  50% {
    text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
                 -20px -20px 50px rgba(255, 255, 255, .5);
  }
}

Im Gegensatz zu mix-blend-mode können jedoch nicht alle gleichen Eigenschaften animiert werden. Zum Beispiel funktioniert text-indent hier nicht und auch transform nicht. Es stimmt zwar, dass CSS-Transformationen auf SVG-Elemente angewendet werden können, aber da unsere Maske tatsächlich in ihrer wahren Form als Maske verwendet wird, wenden Browser diese Transformationen möglicherweise nicht an.

Wir können jederzeit ein transform-SVG-Attribut mit JavaScript einfügen, um diese Transformationen auf die Elemente innerhalb der Maske anzuwenden.

t = document.querySelector('text');
b = document.querySelector('.backdrop');
b.onmouseover = ()=>{
  t.setAttribute('transform', 'translate(20)');
}
b.onmouseout = ()=>{
  t.removeAttribute('transform');
}

Fazit

Was die Browserunterstützung und produktionssicheren Code angeht, hinkt CSS-Maske hinterher, da sie auf Firefox beschränkt ist. Die in diesem Beitrag erwähnten Mischmodi werden in fast allen wichtigen Browsern unterstützt, mit Ausnahme von Edge. Die Eigenschaft background-clip wird ebenfalls von allen Browsern unterstützt, erfordert aber immer noch das -webkit-Präfix.

In Bezug auf das Ergebnis liefern sowohl Mischmodi als auch Masken ähnliche Ausgaben. Zwischen den Werten von background-clip und mix-blend-mode wird die Wahl des Designs darüber entscheiden, welches gegenüber dem anderen bevorzugt wird. Was Sie mit background-clip erreichen können, ist auch durch Mischen möglich, vorausgesetzt, Sie verwenden entweder nur Schwarz oder Weiß als Hintergrund, der mit dem Körper der Seite übereinstimmt.

TLDR; Knockout-Text-Methode *uno*: Wenden Sie einen der vier Knockout-freundlichen Mischmodi auf die oberste Ebene eines Text-Bild-Stapels an und verwenden Sie eine dunkle/helle (oder schwarze/weiße) Farbkombination für den Text und seine Umrandung. Methode *dos*: Stellen Sie background-clip auf text für das Element ein, das sowohl ein Hintergrundbild als auch einen transparenten Text trägt. Methode *tres*: Verwenden Sie CSS-Maskierung auf einem soliden Vordergrund mit einem Bild dahinter und diktieren Sie den Ausschnitt mit einer SVG-Textmaske.