Idėja yra įsivaizduoti tris sluoksnius, sukrautus vienas ant kito, kur viršutinis sluoksnis naudojamas iškirpti figūrą antrame sluoksnyje, kad būtų atskleistas trečiasis sluoksnis.
Jei aukščiau esančio diagramos viršutinio sluoksnio tekstas buvo tokia forma, kurią mes iškirpome iš antrojo sluoksnio, tada šiame paveikslėlyje pavaizduota išjungimo teksto sąvoka.
SVG fragmentas
Čia yra fragmentas, nustatantis apatinį sluoksnį ( .knockout), kurį atskleis .knockout-text-bgišjungimo tekstas, vidurinį sluoksnį ( ), iš kurio mes išpjauname, ir viršutinį sluoksnį ( .knockout-text), kuriame yra SVG tekstas, kuris veiks kaip kaukė, kurią reikia iškirpti iš antrojo sluoksnio.
Knock Out Text Į koordinatės yra visiškai savavališkas šiame pavyzdyje ir gali būti koreguojami, kad atitiktų faktinį dydį ir išdėstymą yra papildomas tekstas.
Atkreipkite dėmesį, kad fillantrojo sluoksnio juoda fill, o viršutinio - balta. Taip veikia kaukės: balta spalva yra puikus kontrastas su juoda spalva ir paslėps juodas dalis. Viršutinį sluoksnį galėtume padaryti visiškai kitokios spalvos ir jis ne visiškai paslėptų juodą spalvą, bet leistų kai kuriai praslysti.
CSS stilius
Likusi dalis yra CSS stilius. Pavyzdžiui, mes galime pridėti fono gradientą prie apatinio sluoksnio ir stilizuoti šrifto dydį, kad gautume daugiau dramatiško efekto.
.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; )Peržiūrėkite „GeP Graham“ (@geoffgraham) „Pen SVG Knock Out“ tekstą „CodePen“.