L'idea qui è di immaginare tre strati impilati uno sopra l'altro dove lo strato superiore viene utilizzato per ritagliare una forma nel secondo strato per rivelare il terzo strato.
Se il testo sul livello superiore del diagramma sopra era la forma che stiamo ritagliando dal secondo livello, l'immagine seguente illustra il concetto di testo knockout.
Snippet in formato SVG
Ecco uno snippet che imposta il livello inferiore ( .knockout) che il testo knockout rivelerà, il livello intermedio ( .knockout-text-bg) che stiamo ritagliando e il livello superiore ( .knockout-text) che contiene il testo SVG che fungerà da maschera da tagliare fuori il secondo strato.
Knock Out Text Le coordinate in questo esempio sono totalmente arbitrarie e possono essere regolate per adattarsi alle dimensioni e alla posizione effettive del testo aggiunto.
Notare che la fillparte del secondo strato è nera e quella filldello strato superiore è bianca. Ecco come funzionano le maschere: il bianco è il contrasto perfetto con il nero e nasconderà le parti nere. Potremmo rendere lo strato superiore di un colore completamente diverso e non nasconderebbe completamente il nero, ma lascerebbe scivolare parte di esso.
Stile CSS
Il resto è lo stile CSS. Ad esempio, possiamo aggiungere un gradiente di sfondo al livello inferiore e aumentare lo stile della dimensione del carattere per ottenere un effetto più drammatico.
.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; )Vedi il Pen SVG Knock Out Text di Geoff Graham (@geoffgraham) su CodePen.