Het idee hier is om je drie lagen op elkaar voor te stellen, waarbij de bovenste laag wordt gebruikt om een vorm in de tweede laag uit te snijden om de derde laag te onthullen.
Als de tekst op de bovenste laag van het bovenstaande diagram de vorm was die we uit de tweede laag snijden, illustreert de volgende afbeelding het concept van knock-outtekst.
SVG-fragment
Hier is een fragment dat de onderste laag ( .knockout) instelt die door de knock-outtekst zal worden onthuld, de middelste laag ( .knockout-text-bg) waaruit we knippen en de bovenste laag ( .knockout-text) die de SVG-tekst bevat die als een te knippen masker zal fungeren uit de tweede laag.
Knock Out Text De coördinaten zijn in dit voorbeeld totaal willekeurig en kunnen worden aangepast aan de werkelijke grootte en plaatsing van de tekst die wordt toegevoegd.
Merk op dat de fillvan de tweede laag zwart is en de fillvan de bovenste laag wit. Dat is hoe maskers werken: wit is het perfecte contrast met zwart en zal de zwarte delen verbergen. We zouden de bovenste laag een totaal andere kleur kunnen geven en het zou het zwart niet helemaal verbergen, maar een deel ervan doorlaten.
CSS-styling
De rest is CSS-styling. We kunnen bijvoorbeeld een achtergrondverloop aan de onderste laag toevoegen en de lettergrootte vergroten om een meer dramatisch effect te krijgen.
.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; )Zie de Pen SVG Knock Out-tekst door Geoff Graham (@geoffgraham) op CodePen.