Idee on siin ette kujutada kolme üksteise peale laotud kihti, kus pealmist kihti kasutatakse teise kihi kuju välja lõikamiseks, et paljastada kolmas kiht.
Kui ülaltoodud skeemi ülemise kihi tekst oli kuju, mille me teisest kihist välja lõikame, siis järgmine pilt illustreerib väljalülitatava teksti mõistet.
SVG jupp
Siin on koodilõik, mis seab alumise kihi ( .knockout), mille väljalülitamise tekst paljastab, keskmise kihi ( .knockout-text-bg), millest me välja lõigame, ja ülemise kihi ( .knockout-text), mis sisaldab SVG-teksti, mis toimib lõigatava maskina välja teine kiht.
Knock Out Text Koordinaadid on täiesti meelevaldne selles näites ja saab reguleerida, et see sobiks tegelik suurus ja paigutus teksti lisamist.
Pange tähele, et fillteine kiht on must ja fillpealmine kiht on valge. Nii toimivad maskid: valge on ideaalne kontrast mustaga ja peidab mustad osad. Võiksime teha pealmise kihi täiesti erineva värviga ja see ei peidaks musta täielikult, vaid laseks mõnel sellest läbi libiseda.
CSS-i stiil
Ülejäänud on CSS-i stiil. Näiteks võime alumisele kihile lisada tausta gradiendi ja kujundada fondi suuruse, et saada rohkem dramaatilist efekti.
.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; )Vaadake CodePenil Geoff Grahami (@geoffgraham) pliiatsi SV SV Knock Out teksti.