La idea aquí es imaginar tres capas apiladas una encima de la otra donde la capa superior se usa para recortar 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 eliminado.
Fragmento de SVG
Aquí hay un fragmento que configura la capa inferior ( .knockout) que revelará el texto eliminatorio, la capa intermedia ( .knockout-text-bg) de la que estamos cortando y la capa superior ( .knockout-text) que contiene el texto SVG que actuará como una máscara para cortar la segunda capa.
Knock Out 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 fillde la segunda capa es negro y el fillde la capa superior es blanco. Así 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 algo se deslice a través.
Estilo CSS
El resto es estilo CSS. Por ejemplo, podemos agregar un degradado de fondo a la capa inferior y darle estilo al tamaño de 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 Knock Out de Pen SVG de Geoff Graham (@geoffgraham) en CodePen.