Hay un par de formas de hacerlo texto eliminatorio (texto que aparece recortado, de modo que pueda ver un fondo detrás de él) en la web. Hay una forma bastante nueva que tiene un soporte de navegador bastante decente que es bastante interesante. Pero cubramos todo el terreno.
Sólo tiene que retocarlo con Photoshop
Como cualquier otra cosa, puedes simularlo con un gráfico plano. A veces vale la pena cubrir lo obvio. Las desventajas son que no es dinámico / difícil de cambiar. No puede copiar y pegar el texto. Las imágenes pueden tener un tamaño de archivo grande, especialmente cuando luchas por obtener una resolución más alta. Etc, etc. Pero puedes hacerlo y funcionará en todas partes:
-webkit-background-clip: texto;
Esta es una propiedad no estandarizada, pero fue inventada para hacer precisamente esto. La belleza es que puedes combinarlo con -webkit-text-fill-color: transparent; para que solo “oculte” el texto en un navegador que pueda hacer el recorte. Divya Manian documentó esto hace unos años.
.clip-text-maybe {
/* if we can clip, do it */
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/* what will show through the text
~ or ~
what will be the background of that element */
background: whatever;
/* fallback text color
~ or ~
the actual color of text, so it better work on the background */
color: red;
}Este es un texto web real, por lo que viene con toda la accesibilidad, la capacidad de búsqueda y la facilidad de cambio y todo eso.
Aquí hay algunos ejemplos divertidos de este método en funcionamiento, por Jintos:
Vea el efecto CSS Pen -webkit-background-clip: texto de Jintos (@Jintos) en CodePen.
Como cualquier otro fondo, puede fijar su posición si lo desea. Aquí hay una demostración de Richard Hayes:
Vea el clip de Pen Webkit con fondo fijo de Richard (@strawstack) en CodePen.
SVG relleno
SVG también puede tener texto real, a través de su <text> elemento. El texto SVG se puede rellenar con lo que sea, incluido un patrón. Y un patrón puede usar una imagen. Entonces … ¡texto nocaut!
Un ejemplo de eso sería como:
<svg>
<pattern id="pattern" patternUnits="userSpaceOnUse" width="750" height="800">
<image width="750" height="800" xlink:href="https://css-tricks.com/how-to-do-knockout-text/image.jpg"></image>
</pattern>
<text x="0" y="80" class="headline" style="fill:url(#pattern);">background-clip: text | Polyfill</text>
</svg>Que podría usar directamente en HTML en cualquier lugar. Aquí hay un ejemplo de eso por CY Park:
Vea el clip de texto Pen SVG con degradado y GIF de CY Park (@cypark) en CodePen.
Lea Verou también documentó esta técnica.
Polyfill el CSS con SVG
Tim Pietrusky creó un polyfill para -webkit-background-clip que utiliza el método SVG como alternativa. La versión CSS es ciertamente más fácil de escribir rápidamente que la versión SVG, por lo que parece que esta podría ser una buena forma de hacerlo y, al mismo tiempo, obtener una mejor compatibilidad con el navegador.
Vea el Pen -webkit-background-clip: texto Polyfill por Tim Pietrusky (@TimPietrusky) en CodePen.
mix-blend-mode: pantalla;
¡Este es el nuevo que no había visto antes! La combinación de CSS es bastante nueva. Le permite combinar elementos sobre otros elementos como lo haría con estilos de capas en Photoshop (por ejemplo, “pantalla”, “multiplicar”, “aclarar”, etc.)
Si se hace correctamente, puede combinar una imagen sobre el texto sin afectar el fondo “real”. Vi por primera vez a Giana hacerlo en CodePen:
Vea el texto degradado de CSS de la pluma en Firefox por Giana (@giana) en CodePen.
Funciona así:
- Haz que el texto sea negro.
- Cubra todo el texto con el nuevo fondo de texto y
mix-blend-mode: screen; - Luego cúbralo con una nueva copia del mismo texto (en blanco) y el mismo fondo que la página y
mix-blend-mode: multiply;
Eso dejará solo el texto con el fondo “knockout” visible. Si usa eventos de puntero, puede dejar el texto en el que se puede hacer clic y también se puede seleccionar, aunque es difícil ver lo que está haciendo.
La ventaja aquí es que este es un método de CSS puro que también funciona en Firefox, no solo -webkit- cosas.