Идеја овде је да замислимо три слоја сложена један на други где се горњи слој користи за изрезивање облика у другом слоју како би се открио трећи слој.
Ако је текст на горњем слоју горњег дијаграма био облика који изрезујемо из другог слоја, онда следећа слика илуструје концепт нокаут текста.
СВГ исечак
Ево исечка који поставља доњи слој ( .knockout) који ће открити нокаут текст, средњи слој ( .knockout-text-bg) којег изрезујемо и горњи слој ( .knockout-text) који садржи СВГ текст који ће деловати као маска за резање напоље други слој.
Knock Out Text У координате су потпуно произвољне у овом примеру и могу се прилагодити стварну величину и положај да буде додат текст.
Имајте на уму да је fillдруги слој црне боје, а fillгорњи слој беле боје. Тако раде маске: бела боја је савршен контраст црној боји и сакриће црне делове. Горњи слој бисмо могли направити потпуно другачијом бојом и не би у потпуности сакрио црну, али дозволио да део прође.
ЦСС Стилинг
Остало је ЦСС стил. На пример, доњем слоју можемо додати градијент позадине и стилизовати величину фонта како бисмо добили више драматичног ефекта.
.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; )Погледајте текст СВГ Кноцк оут Геофф Грахам (@геоффграхам) на ЦодеПен.