Az ötlet az, hogy három réteget egymásra rakva képzeljünk el, ahol a felső réteget használjuk a második réteg alakjának kivágására a harmadik réteg feltárására.
Ha a fenti ábra felső rétegének szövege az alakzat, amelyet kivágunk a második rétegből, akkor a következő kép a kiütéses szöveg fogalmát szemlélteti.
SVG-részlet
Itt van egy részlet, amely beállítja az alsó réteget ( .knockout), amelyet a kiütéses szöveg felfed, a középső réteget ( .knockout-text-bg), amelyet kivágunk, és a felső réteget ( .knockout-text), amely az SVG szöveget tartalmazza, amely maszkként fog működni ki a második réteget.
Knock Out Text A koordináták ebben a példában teljesen önkényesek, és a hozzáadandó szöveg tényleges méretéhez és elhelyezéséhez igazíthatók.
Ne feledje, hogy a fillmásodik réteg fekete fill, a felső réteg pedig fehér. A maszkok így működnek: a fehér tökéletes ellentétben áll a feketével, és el fogja rejteni a fekete részeket. A felső réteget teljesen más színűvé tehetjük, és ez nem rejti el teljesen a feketét, de engedi átcsúszni egy részét.
CSS stílus
A többi CSS stílus. Például felvehetünk egy háttérgradienst az alsó rétegbe, és stilizálhatjuk a betűméretet, hogy még drámaibb hatást érjünk el.
.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; )Lásd Geoff Graham (@geoffgraham) Pen SVG Knock Out szövegét a CodePen-en.