Die Idee hier ist, sich drei übereinander gestapelte Schichten vorzustellen, wobei die oberste Schicht verwendet wird, um eine Form in der zweiten Schicht auszuschneiden, um die dritte Schicht freizulegen.
Wenn der Text auf der obersten Ebene des obigen Diagramms die Form hat, die wir aus der zweiten Ebene ausschneiden, zeigt das folgende Bild das Konzept des Knockout-Textes.
SVG-Snippet
Hier ist ein Ausschnitt, der die untere Ebene ( .knockout) erstellt, die der Knockout-Text anzeigt, die mittlere Ebene ( .knockout-text-bg), aus der wir ausschneiden, und die obere Ebene ( .knockout-text), die den SVG-Text enthält, der als zu schneidende Maske fungiert aus der zweiten Schicht.
Knock Out Text Die Koordinaten sind in diesem Beispiel völlig willkürlich und können an die tatsächliche Größe und Platzierung des hinzugefügten Textes angepasst werden.
Beachten Sie, dass die fillder zweiten Schicht schwarz und die fillder obersten Schicht weiß ist. So funktionieren Masken: Weiß ist der perfekte Kontrast zu Schwarz und verbirgt die schwarzen Teile. Wir könnten die oberste Schicht in eine völlig andere Farbe bringen und sie würde das Schwarz nicht vollständig verbergen, aber einen Teil davon durchrutschen lassen.
CSS-Styling
Der Rest ist CSS-Styling. Zum Beispiel können wir der unteren Ebene einen Hintergrundverlauf hinzufügen und die Schriftgröße anpassen, um einen dramatischeren Effekt zu erzielen.
.knockout ( /* Ensure the bottom layer is full screen */ height: 100vh; width: 100%; /* Add a colorful texture and cutom font-styling */ background-image: linear-gradient(to left, #ff4e50 , #f9d423); text-transform: uppercase; ) /* Knockout text font sizing for each line */ text:nth-child(2) ( font-size: 5em; ) text:nth-child(3) ( font-size: 5.1em; ) text:nth-child(4) ( font-size: 15em; )Siehe den Stift SVG Knock Out Text von Geoff Graham (@geoffgraham) auf CodePen.