Ideja je ovdje zamisliti tri sloja složena jedan na drugi gdje se gornji sloj koristi za izrezivanje oblika u drugom sloju kako bi se otkrio treći sloj.
Ako je tekst na gornjem sloju gornjeg dijagrama oblik koji izrezujemo iz drugog sloja, sljedeća slika ilustrira koncept nokaut teksta.
SVG isječak
Evo isječka koji postavlja donji sloj ( .knockout) koji će otkriti tekst s nokautom, srednji sloj ( .knockout-text-bg) kojeg izrezujemo i gornji sloj ( .knockout-text) koji sadrži SVG tekst koji će djelovati kao maska za rezanje van drugog sloja.
Knock Out Text U koordinate su potpuno proizvoljne u ovom primjeru, a može se prilagoditi stvarnu veličinu i položaj tekst biti dodan.
Imajte na umu da je filldrugi sloj crn, a fillgornji sloj bijel. Tako djeluju maske: bijela boja savršen je kontrast crnoj boji i sakrit će crne dijelove. Gornji sloj mogli bismo napraviti potpuno drugačiju boju i ne bi u potpunosti sakrio crnu, ali dopuštao da dio prođe.
CSS stil
Ostalo je CSS styling. Na primjer, donjem sloju možemo dodati gradijent pozadine i oblikovati veličinu fonta kako bismo dobili više dramatičnog efekta.
.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; )Pogledajte tekst SVG Knock Out Geffa Grahama (@geoffgraham) na CodePenu.