Ideen her er at forestille sig tre lag stablet oven på hinanden, hvor det øverste lag bruges til at skære en form ud i det andet lag for at afsløre det tredje lag.
Hvis teksten på det øverste lag i diagrammet ovenfor var den form, vi skar ud af det andet lag, så illustrerer det følgende billede begrebet knockout-tekst.
SVG-uddrag
Her er et uddrag, der opsætter det nederste lag ( .knockout), som knockout-teksten vil afsløre, det midterste lag ( .knockout-text-bg), som vi skærer ud af, og det øverste lag ( .knockout-text), der indeholder SVG-teksten, der fungerer som en maske til at klippe ud af det andet lag.
Knock Out Text De koordinater er helt vilkårlige i dette eksempel, og kan justeres til at passe til den faktiske størrelse og placering af den tekst, der tilføjes.
Bemærk, at filldet andet lag er sort, og filldet øverste lag er hvidt. Sådan fungerer masker: hvid er den perfekte kontrast til sort og skjuler de sorte dele. Vi kunne gøre det øverste lag til en helt anden farve, og det ville ikke skjule det sorte helt, men lade noget af det glide igennem.
CSS Styling
Resten er CSS-styling. For eksempel kan vi tilføje en baggrundsgradient til det nederste lag og oprette skriftstørrelsen for at få mere af en dramatisk effekt.
.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; )Se Pen SVG Knock Out Text af Geoff Graham (@geoffgraham) på CodePen.