Ideja ir iedomāties trīs slāņus, kas sakrauti viens virs otra, kur augšējo slāni izmanto, lai izgrieztu figūru otrajā slānī, lai atklātu trešo slāni.
Ja iepriekš redzamās diagrammas augšējā slāņa teksts bija forma, kuru mēs izgriežam no otrā slāņa, tad šāds attēls ilustrē izslēgšanas teksta jēdzienu.
SVG fragments
Šis ir fragments, kas izveido apakšējo slāni ( .knockout), kuru atklās izslēgšanas teksts, vidējo slāni ( .knockout-text-bg), no kura mēs izgriežam, un augšējo slāni ( .knockout-text), kurā ir SVG teksts, kas darbosies kā griezuma maska ārā no otrā slāņa.
Knock Out Text Šīs koordinātas ir pilnīgi patvaļīgi šajā piemērā, un to var pielāgot, lai atbilstu faktisko lielumu un novietojumu teksts tiek pievienots.
Ņemiet vērā fill, ka otrā slāņa krāsa ir melna fill, bet augšējā - balta. Tieši tā darbojas maskas: balta krāsa ir ideāls kontrasts ar melnu un slēpj melnās daļas. Mēs varētu padarīt augšējo slāni pilnīgi atšķirīgu krāsu, un tas pilnībā neslēptu melno, bet ļautu daļai no tā izlīst.
CSS stils
Pārējais ir CSS stils. Piemēram, mēs varam pievienot fona gradientu apakšējam slānim un stilizēt fonta lielumu, lai iegūtu vairāk dramatiska efekta.
.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; )Skatiet Geoff Graham (@geoffgraham) Pen SVG Knock Out tekstu vietnē CodePen.