Ajatuksena on kuvitella kolme päällekkäin olevaa kerrosta, joissa yläkerrosta käytetään leikkaamaan muoto toisesta kerroksesta kolmannen kerroksen paljastamiseksi.
Jos yllä olevan kaavion yläkerrassa oleva teksti oli muoto, jonka leikkaamme toisesta kerroksesta, seuraava kuva kuvaa poistotekstin käsitettä.
SVG-katkelma
Tässä on katkelma, joka asettaa alemman kerroksen ( .knockout), jonka poistoteksti paljastaa, keskimmäisen kerroksen ( .knockout-text-bg), josta leikkaamme, ja ylimmän kerroksen ( .knockout-text), joka sisältää SVG-tekstin, joka toimii leikkaavana maskina ulos toinen kerros.
Knock Out Text Koordinaatit ovat täysin mielivaltainen tässä esimerkissä ja voidaan sovittaa todellinen koko ja sijoittelu tekstin lisätään.
Huomaa, että filltoinen kerros on musta ja fillylimmän kerroksen valkoinen. Näin naamiot toimivat: valkoinen on täydellinen kontrasti mustalle ja piilottaa mustat osat. Voisimme tehdä ylimmästä kerroksesta täysin erivärisen, eikä se piilottaisi mustaa kokonaan, mutta antaisi sen liukastua läpi.
CSS-muotoilu
Loput ovat CSS-muotoilua. Esimerkiksi voimme lisätä taustakaltevuuden alempaan kerrokseen ja tyylittää kirjasinkokoa saadaksesi enemmän dramaattista vaikutusta.
.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; )Katso Geoff Grahamin (@geoffgraham) kynä SVG Knock Out -teksti CodePenistä.