El texto oculto es una técnica en la que las palabras se recortan de un elemento y revelan el fondo. En otras palabras, solo ves el fondo porque las letras están haciendo agujeros. Es atractivo porque abre estilos tipográficos que no obtenemos de las propiedades CSS tradicionales, como color.
Si bien hemos visto varias formas de lograr texto oculto en el pasado, hay algunas propiedades CSS modernas que podemos usar ahora e incluso mejorar aún más el efecto, como transiciones y animaciones. Veámoslos en acción.
Mezclar modos de fusión
Hay cuatro modos de fusión que hacen recortes de texto sin esfuerzo: multiply, screen, darken, y lighten. Al aplicarlos al elemento superior de una pila de imágenes y texto, con el texto en la parte superior, se crea el diseño oculto.
Aunque, en la mayoría de los casos, se usa el blanco o el negro en estos modos de fusión para obtener una distinción clara entre el texto y el fondo, prefiero usar un color más oscuro o más claro para mantener la imagen trasera ligeramente visible, así:
<div class="backdrop">
<p class="text">Taitō</p>
</div>/* Background layer with an image */
.backdrop {
background: url("/path/to/image.jpg") center;
...
}
/* Dark foreground layer, with white text, set to "multiply" mix blend mode */
.text {
color: white;
background: rgb(59, 2, 6);
mix-blend-mode: multiply;
...
}Consulte el texto de eliminación de CSS del lápiz de Preethi (@rpsthecoder) en CodePen.
El uso de un color más oscuro (o más claro) también crea un buen “tema” con la imagen que se muestra a través del texto.
El multiplicar el modo de fusión mantiene oscuros los colores más oscuros y los colores más claros dejan pasar lo que hay detrás de ellos: una porción negra en la capa superior será completamente opaca y el blanco será completamente transparente.
los efectos de la multiply mezclar modo de mezcla.
En el ejemplo anterior, el texto blanco se volvió completamente transparente, mientras que el color más oscuro a su alrededor permite que la imagen detrás se vea solo un poco, ya que los tonos más oscuros no se ven afectados.
El pantalla el modo de fusión invierte los roles: los colores más oscuros crean translucidez mientras que los tonos más claros permanecen claros y bloquean lo que hay detrás.
El oscurecer y aligerar los modos de fusión son similares a multiplicar y pantalla, respectivamente, excepto que los detalles se pierden en las partes de la imagen posterior que se pueden ver. En lugar de mezclar los tonos, los modos eligen el tono más oscuro o más claro de las dos capas que se muestran.
Vea a continuación la diferencia en cómo los cuatro modos han combinado los colores:
/* Knockout text within a dark area */
.multiply {
color: white;
mix-blend-mode: multiply;
background-color: rgb(59, 2, 6);
}
/* Knockout text within a bright area */
.screen {
color: black;
mix-blend-mode: screen;
background-color: rgb(244, 220, 211);
}
/* Knockout text within a dark area that's less detailed */
.darken {
color: white;
mix-blend-mode: darken;
background-color: rgb(59, 2, 6);
}
/* Knockout text within a light area that's less detailed */
.lighten {
color: black;
mix-blend-mode: lighten;
background-color: rgb(244, 220, 211);
}Consulte el texto de eliminación de CSS del lápiz de Preethi (@rpsthecoder) en CodePen.
Usar un modo de mezcla es la opción más conveniente para obtener un efecto de texto oculto, ya que nos permite aplicar estilos adicionales que otras técnicas podrían no permitir.
Echemos un vistazo más de cerca a los estilos que podemos usar para mejorar el efecto knockout.
Desenfoque de sombra
Agregar una sombra de texto blanca/negra o clara/oscura al texto crea un efecto borroso. Por ejemplo, digamos que agrego un text-shadow eso es con un gran valor de radio de desenfoque:
.text {
text-shadow: 0 0 9px white;
...
}Ahora los bordes son menos nítidos y dan una especie de efecto turbio:
Vea el texto borroso de eliminación de CSS del lápiz de Preethi (@rpsthecoder) en CodePen.
Animación
Incluso podemos hacer que las cosas se muevan un poco. Por ejemplo, tomemos construir sobre el text-shadow idea que vimos arriba y le ponemos un poco de movimiento para que parezca que el texto está brillando:
.text {
animation: glow 3s infinite;
...
}
@keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
50% {
text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
-20px -20px 50px rgba(255, 255, 255, .5);
}
}Vea la animación de brillo de texto de eliminación de CSS de lápiz de Preethi (@rpsthecoder) en CodePen.
Transición
La transición es otra propiedad que podemos aplicar a nuestro texto oculto y que abre posibilidades aún más interesantes, como usar text-indent en pseudo-clases como :hover.
Así es como podemos usar la transición en pseudoclases para introducir un nuevo elemento en el texto oculto:
/* The knockout text */
.text {
transition: text-indent .5s;
...
}
/* On hover, trigger the transition */
.text:hover {
text-indent: 5px;
transition: text-indent .5s;
}
/* The thing that slides in on hover */
.text:hover::before {
display: inline-block;
content: '✈︎';
}Vea la transición de texto de CSS Knockout de Pen por Preethi (@rpsthecoder) en CodePen.
Clip de fondo
El background-clip Propiedad CSS establecida con el text valor recorta un fondo a la forma de su texto de primer plano.
Utilizando background-clip: text
<p class="text">Taitō</p>.text {
background: url("/path/to/image.jpg") center;
background-clip: text;
color: transparent;
...
}Vea el Texto de eliminación de lápiz de Preethi (@rpsthecoder) en CodePen.
El texto transparente muestra la imagen detrás de él que ya está cortada con la forma del texto. Aunque este es un verdadero enfoque de texto oculto (literalmente elimina el fondo que rodea el texto en la pantalla), al no dejar ningún fondo para sangrar o mover, deja poco espacio para que ocurran otros efectos como el desenfoque o el texto en movimiento. Ahí es donde mix-blend-mode tiene una ventaja
Máscara CSS
La primera técnica que analizamos emplea enmascaramiento, un concepto en el que las formas se crean en una capa de primer plano y usan el color para determinar qué parte de la forma muestra el fondo. Las partes negras del primer plano se ocultan (o “máscara”) y las partes blancas revelan el fondo, o viceversa. Cualquier valor de gris entre el blanco y el negro se trata como varios grados de transparencia parcial.
La máscara CSS funciona de la misma manera: declara directamente que una imagen es la máscara aplicada sobre otra imagen y, según el tipo de máscara, recortamos una parte. Al momento de escribir esta publicación, la máscara CSS es totalmente compatible solo con Firefox.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 100* | 53 | No | 97* | TP* |
Móvil / Tableta
| Android cromo | android firefox | Androide | iOSSafari |
|---|---|---|---|
| 96* | 95 | 96* | 15.2* |
Dado que estamos analizando específicamente el texto oculto, la máscara debe estar hecha de texto. Este es un gran uso para SVG <mask>, que puede crear máscaras a partir de formas y textos SVG.
<div class="backdrop">
<p class="text"></p>
</div>
<svg>
<defs>
<mask id="m">
<rect width="100%" height="100%" fill="white" />
<text x="50%" y="75%" text-anchor="middle">Taitō</text>
</mask>
</defs>
</svg>/* Background layer with an image */
.backdrop {
background: url("/path/to/image.jpg") center;
...
}
/* Dark foreground layer with masking applied */
.text {
background-color: rgba(59, 2, 6, 1);
mask-type: luminance;
/* Referrer to an SVG mask */
mask: url("#m");
...
}
svg {
width: 75vw;
height: 20vw;
}
/* SVG text inside the mask */
text {
font: bolder 12vw 'Alfa Slab One';
}Vea el Texto de eliminación de lápiz de Preethi (@rpsthecoder) en CodePen.
El luminance valor en el mask-type La propiedad del elemento de primer plano implementa un mecanismo de enmascaramiento donde partes de esta capa, correspondientes a las partes negras de la máscara, se vuelven transparentes. Las partes correspondientes a las partes blancas de la máscara permanecen opacas. El mask propiedad utiliza el url() valor para designar el elemento SVG utilizado para la máscara.
SVG <mask> El elemento crea una máscara reflejada a partir de su contenido. Los contenidos que hice dentro del <mask> son un rectángulo blanco (<rect>) y texto negro (<text>). El texto, al ser negro, trae a la vista la porción de la imagen detrás de él después de enmascararlo.
Desenfoque, animación y transición
Las máscaras CSS abren los mismos efectos de desenfoque y animación que pudimos usar con mix-blend-mode.
Ese mismo texto brillante que usamos antes se aplica aquí también, esta vez aplicado directamente al <text> elemento del SVG:
text {
font: bolder 12vw 'Alfa Slab One';
animation: glow 3s infinite;
}
@keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
50% {
text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
-20px -20px 50px rgba(255, 255, 255, .5);
}
}Sin embargo, a diferencia de mix-blend-mode, no se pueden animar todas las mismas propiedades. Por ejemplo, text-indent no funcionará aquí y tampoco lo hará transform. Es cierto que las transformaciones CSS se pueden aplicar a los elementos SVG, pero debido a que nuestra máscara en realidad se usa como una máscara en su forma más real, es posible que los navegadores no apliquen esas transformaciones.
Siempre podemos inyectar un transform Atributo SVG usando JavaScript, entregando esas transformaciones a los elementos dentro de la máscara:
t = document.querySelector('text');
b = document.querySelector('.backdrop');
b.onmouseover = ()=>{
t.setAttribute('transform', 'translate(20)');
}
b.onmouseout = ()=>{
t.removeAttribute('transform');
}Conclusión
Cuando se trata de compatibilidad con navegadores y código seguro de producción, la máscara CSS se queda atrás debido a que se limita a la compatibilidad con Firefox. Los modos de fusión mencionados en esta publicación son compatibles con casi todos los principales navegadores, excepto Edge. El background-clip La propiedad también es compatible con todos los navegadores, pero aún requiere -webkit prefijo.
En términos de resultado, tanto los modos de fusión como la máscara dan un resultado similar. Entre background-clip y mix-blend-mode valores, será la elección del diseño la que lleve a elegir uno sobre otro. Lo que puedes lograr con background-clip también se puede hacer fusionando, siempre que esté usando solo un fondo blanco o negro que coincida con el cuerpo de la página.
TLDR; método de texto oculto uno: aplique uno de los cuatro modos de fusión fáciles de eliminar a la capa superior de una pila de texto e imagen y use una combinación de colores oscuro/claro (o negro/blanco) en el texto y su envolvente. Método dos: establecer background-clip a text en el elemento que lleva tanto una imagen de fondo como un texto transparente. Método tres: use máscaras CSS en un primer plano sólido con una imagen detrás y dicte el recorte usando una máscara de texto SVG.