Ide o to, predstaviť si tri vrstvy naskladané na seba, kde sa horná vrstva používa na vystrihnutie tvaru v druhej vrstve, aby sa odkryla tretia vrstva.
Ak text v hornej vrstve vyššie uvedeného diagramu bol tvarom, ktorý vyrezávame z druhej vrstvy, potom nasledujúci obrázok ilustruje koncept vyradeného textu.
Úryvok SVG
Tu je úryvok, ktorý nastavuje spodnú vrstvu ( .knockout), ktorú odhalí text s vyradením, strednú vrstvu ( .knockout-text-bg), z ktorej vyrezávame, a hornú vrstvu ( .knockout-text), ktorá obsahuje text SVG, ktorý bude slúžiť ako maska na vystrihnutie. z druhej vrstvy.
Knock Out Text Tieto súradnice sú úplne ľubovoľne v tomto príklade a môže byť upravená tak, aby vyhovoval skutočnej veľkosti a umiestnenia textu sú pridané.
Upozorňujeme, že filldruhá vrstva je čierna a fillhorná vrstva biela. Takto fungujú masky: biela je dokonalým kontrastom k čiernej a skryje čierne časti. Mohli by sme urobiť vrchnú vrstvu úplne inej farby a úplne by nezakrývala čiernu, ale umožňovala niektorým jej skĺznuť.
Styling CSS
Zvyšok je styling CSS. Napríklad môžeme pridať gradient pozadia do spodnej vrstvy a upraviť veľkosť písma, aby sme dosiahli výraznejší efekt.
.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; )Prečítajte si text vyradenia pera SVG od Geoffa Grahama (@geoffgraham) na stránkach CodePen.