L'idée ici est d'imaginer trois couches empilées les unes sur les autres où la couche supérieure est utilisée pour découper une forme dans la deuxième couche pour révéler la troisième couche.
Si le texte sur la couche supérieure du diagramme ci-dessus était la forme que nous découpons dans la deuxième couche, l'image suivante illustre le concept de texte masqué.
Extrait SVG
Voici un extrait de code qui définit le calque inférieur ( .knockout) que le texte masqué révélera, le calque du milieu ( .knockout-text-bg) que nous .knockout-textcoupons et le calque supérieur ( ) qui contient le texte SVG qui servira de masque à couper sur la deuxième couche.
Knock Out Text Les coordonnées sont totalement arbitraires dans cet exemple et peuvent être ajustées en fonction de la taille et de l'emplacement réels du texte ajouté.
Notez que le fillde la deuxième couche est noir et le fillde la couche supérieure est blanc. C'est ainsi que fonctionnent les masques: le blanc contraste parfaitement avec le noir et masquera les parties noires. Nous pourrions rendre la couche supérieure d'une couleur totalement différente et cela ne cacherait pas complètement le noir, mais laisserait une partie de celui-ci passer à travers.
Style CSS
Le reste est le style CSS. Par exemple, nous pouvons ajouter un dégradé d'arrière-plan au calque inférieur et augmenter la taille de la police pour obtenir un effet plus dramatique.
.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; )Voir le texte Knock Out SVG Pen par Geoff Graham (@geoffgraham) sur CodePen.
