Ideea de aici este să ne imaginăm trei straturi stivuite unul peste altul în care stratul superior este folosit pentru a tăia o formă în al doilea strat pentru a dezvălui al treilea strat.
Dacă textul de pe stratul superior al diagramei de mai sus avea forma pe care o decupăm din al doilea strat, atunci următoarea imagine ilustrează conceptul de text eliminabil.
Fragment SVG
Iată un fragment care setează stratul inferior ( .knockout) pe care îl va dezvălui textul knockout-ului, stratul mediu ( .knockout-text-bg) pe care îl tăiem și stratul superior ( .knockout-text) care conține textul SVG care va acționa ca o mască de tăiat în al doilea strat.
Knock Out Text De Coordonatele sunt total arbitrare în acest exemplu și pot fi ajustate pentru a se potrivi dimensiunea reală și plasarea de a fi adăugat textul.
Rețineți că fillal doilea strat este negru, iar cel fillal stratului superior este alb. Așa funcționează măștile: albul este contrastul perfect cu negrul și va ascunde părțile negre. Am putea face ca stratul superior să aibă o culoare total diferită și nu ar ascunde complet negrul, ci ar permite ca unele dintre ele să alunece.
Stil CSS
Restul este stilul CSS. De exemplu, putem adăuga un gradient de fundal la stratul inferior și stiliza dimensiunea fontului pentru a obține un efect mai dramatic.
.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; )Consultați textul SVG Knock Out Pen de Geoff Graham (@geoffgraham) pe CodePen.