La idea aquí es imaginar tres capas apiladas una encima de la otra donde la capa superior se usa para cortar una forma en la segunda capa para revelar la tercera capa.
Si el texto en la capa superior del diagrama de arriba fuera la forma que estamos recortando de la segunda capa, entonces la siguiente imagen ilustra el concepto de texto oculto.
Fragmento SVG
Aquí hay un fragmento que configura la capa inferior (.knockout) que revelará el texto oculto, la capa intermedia (.knockout-text-bg) que estamos recortando, y la capa superior (.knockout-text) que contiene el texto SVG que actuará como máscara para recortar la segunda capa.
<div class="knockout">
<svg class="knockout-text-container" width="100%" height="100%">
<rect class="knockout-text-bg" width="100%" height="100%" fill="#000" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)" />
<mask id="knockout-text">
<rect width="100%" height="100%" fill="#fff" x="0" y="0" />
<text x="50%" y="50%" fill="#000" text-anchor="middle">Knock Out Text</text>
</mask>
</svg>
</div>El <text> las coordenadas son totalmente arbitrarias en este ejemplo y se pueden ajustar para adaptarse al tamaño real y la ubicación del texto que se agrega.
Tenga en cuenta que el fill de la segunda capa es negra y la fill de la capa superior es de color blanco. Así es como funcionan las máscaras: el blanco es el contraste perfecto con el negro y ocultará las partes negras. Podríamos hacer que la capa superior fuera de un color totalmente diferente y no ocultaría completamente el negro, pero permitiría que parte de él se deslizara.
Estilo CSS
El resto es estilo CSS. Por ejemplo, podemos agregar un degradado de fondo a la capa inferior y aumentar el tamaño de la fuente para obtener un efecto más dramático.
.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;
}Vea el texto eliminado de SVG del bolígrafo por Geoff Graham (@geoffgraham) en CodePen.