Ideen her er å forestille seg tre lag stablet oppå hverandre der topplaget brukes til å kutte ut en form i det andre laget for å avsløre det tredje laget.
Hvis teksten på det øverste laget av diagrammet ovenfor var den formen vi kutter ut av det andre laget, illustrerer følgende bilde konseptet med knockout-tekst.
SVG-utdrag
Her er et utdrag som setter opp det nederste laget ( .knockout) som knockout-teksten vil avsløre, det midterste laget ( .knockout-text-bg) som vi kutter ut av, og det øverste laget ( .knockout-text) som inneholder SVG-teksten som vil fungere som en maske å kutte ut det andre laget.
Knock Out Text De koordinater er helt vilkårlig i dette eksempel, og kan justeres for å passe den faktiske størrelsen og plasseringen av den tekst som tilsettes.
Merk at det fillandre laget er svart og filldet øverste laget er hvitt. Slik fungerer masker: hvitt er den perfekte kontrasten til svart og vil skjule de svarte delene. Vi kunne gjøre topplaget til en helt annen farge, og det skjulte ikke svart, men lot noe av det gli gjennom.
CSS Styling
Resten er CSS-styling. For eksempel kan vi legge til en bakgrunnsgradient i det nederste laget og utforme skriftstørrelsen for å få mer dramatisk effekt.
.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; )Se penn SVG Knock Out Text av Geoff Graham (@geoffgraham) på CodePen.