Идеята тук е да си представим три слоя, подредени един върху друг, където горният слой се използва за изрязване на фигура във втория слой, за да се разкрие третият слой.
Ако текстът на горния слой на диаграмата по-горе е формата, която изрязваме от втория слой, тогава следващото изображение илюстрира концепцията за нокаут текст.
SVG фрагмент
Ето фрагмент, който задава долния слой ( .knockout), който ще разкрие нокаутният текст, средния слой ( .knockout-text-bg), от който изрязваме, и горния слой ( .knockout-text), който съдържа SVG текста, който ще действа като маска за изрязване от втория слой.
Knock Out Text В този пример координатите са напълно произволни и могат да бъдат коригирани така, че да отговарят на действителния размер и разположението на текста, който се добавя.
Имайте предвид, че fillвторият слой е черен, а fillгорният слой е бял. Ето как работят маските: бялото е идеалният контраст на черното и ще скрие черните части. Можем да направим горния слой с напълно различен цвят и той няма да скрие напълно черното, но ще позволи на част от него да се изплъзне.
CSS стил
Останалото е CSS стил. Например, можем да добавим градиент на фона към долния слой и да увеличим размера на шрифта, за да получим по-драматичен ефект.
.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; )Вижте текста на SVG Knock Out от Geoff Graham (@geoffgraham) на CodePen.