Ideja je zamisliti tri sloje, zložene enega na drugega, kjer se z zgornjo plastjo izreže oblika v drugi plasti, da se razkrije tretja plast.
Če je bilo besedilo na zgornji plasti zgornjega diagrama oblika, ki jo izrezujemo iz druge plasti, potem naslednja slika ponazarja koncept izločitvenega besedila.
Delček SVG
Tu je delček, ki nastavi spodnjo plast ( .knockout), ki jo bo razkrilo izločilno besedilo, srednjo plast ( .knockout-text-bg), ki jo .knockout-textizrezujemo , in zgornjo plast ( ), ki vsebuje besedilo SVG, ki bo delovalo kot maska za rezanje ven drugi sloj.
Knock Out Text Za koordinate so popolnoma samovoljno v tem primeru in se lahko prilagodi dejansko velikost in postavitev, ki se doda besedilo.
Upoštevajte, da je filldrugi sloj črn, fillzgornji sloj pa bel. Tako delujejo maske: bela barva je popoln kontrast črni in bo skrila črne dele. Zgornji sloj bi lahko naredili popolnoma drugačne barve in črne ne bi popolnoma skril, vendar bi nekaj pustil, da zdrsne.
CSS oblikovanje
Ostalo je oblikovanje CSS. Spodnji plasti lahko na primer dodamo gradient ozadja in oblikujemo velikost pisave, da dobimo večji dramatičen učinek.
.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; )Oglejte si besedilo Pen SVG Knock Out Geffa Grahama (@geoffgraham) na CodePen.