Con la adición de algunas nuevas propiedades CSS en los últimos años, los desarrolladores de frontend pueden ahora crear interesantes visuales de texto mucho más fácil. “Knockout” o “recorte” de texto, donde las palabras recortan una imagen de fondo, un gradiente o un vídeo, son posibles con muy poco código.

En este artículo, exploraremos cinco técnicas de enmascaramiento y recorte de texto CSS utilizando las propiedades background-clip y clip-path.

Texto degradado CSS#

Comencemos por crear un efecto de texto degradado CSS. La idea general es establecer un gradiente de fondo detrás de algún texto y luego “recortar” el fondo a los bordes del texto.

Esto en realidad sólo requiere cuatro líneas de CSS para lograr.

Supongamos que tenemos un h1.

<h1>Gradients</h1>

En CSS, vamos a añadir un fondo de degradado:

h1 {background: linear-gradient(30deg, #9ED8DB 40%, #007B82 70%);}

Si eres como yo y nunca puedes recordar la sintaxis exacta de los degradados CSS, echa un vistazo a la impresionante herramienta generadora de degradados en coolors.co.

Ahora vamos a añadir la propiedad que hace el recorte: background-clip.

La propiedad CSS background-clip establece si el fondo de un elemento se extiende por debajo de su caja de borde, caja de relleno o caja de contenido. – MDN Docs

h1 {...background-clip: text;-webkit-background-clip: text;}

Usar el valor text con esta propiedad permite que el gradiente de fondo se extienda y recorte los bordes del fondo dentro del texto.

La última propiedad que necesitamos es un color de texto. Debería ser transparente para que el fondo sea completamente visible. Sin esto, es probable que sólo se vea un delgado contorno del gradiente.

h1 {...color: transparent;}

El prefijo -webkit es realmente necesario para Chrome y Safari en el momento de escribir este artículo porque el valor text sólo tiene soporte parcial. La adición de las propiedades con prefijo y sin prefijo debería ser compatible con la mayoría de los navegadores, aparte de Internet Explorer. Si necesita soportar IE, puede añadir un color de texto no transparente como un fallback e incluirlo antes del color transparente.

Consulte la documentación de background-clip para obtener información completa sobre el soporte de los navegadores.

CSS Animated Gradient Text#

Para el siguiente efecto, sigamos con los gradientes y usemos un gradiente animado como fondo del texto.

<h1>Animated</h1>

Y para el CSS:

h1 {background: radial-gradient(circle, #80ffc1 0%, #ff6161 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}

Continuamos utilizando las propiedades background-clip, y establecemos el color del texto en transparent al igual que en el ejemplo anterior.

Ya que estamos trabajando con animación, necesitamos definirla a continuación. La animación debe ejecutarse infinitamente y alternar de izquierda a derecha, y viceversa.

h1 {...animation: animatedGradient 2s infinite ease; animation-direction: alternate;}

Por último definimos el fotograma clave de la animación, que aumenta el valor background-size para obtener el movimiento real de la animación.

@keyframes animatedGradient { from { background-size: 100%; } to { background-size: 250%; }}

CSS Image Background Text#

Este siguiente ejemplo volverá a ser similar a los que acabamos de tratar. La única diferencia es que utilizaremos una imagen real en lugar de un degradado como fondo.

<h1>Images</h1>

h1 {background: url('./image.jpg') no-repeat center center; background-clip: text; -webkit-background-clip: text; color: transparent;}

En nuestro caso, queremos asegurarnos de que la imagen de fondo no se repite y está centrada vertical y horizontalmente.

CSS Video Background Text#

De acuerdo, a continuación utilizaremos el vídeo como fondo de nuestro texto. Este efecto es diferente porque utiliza un SVG en lugar de un h1.

Primero, necesitamos un div que contenga una etiqueta de vídeo.

<div class="video-container"> <video loop autoPlay muted playsInline> <source src="./video.mp4" type="video/mp4" />... Other <source /> tags here if necessary </video></div>

En la etiqueta de vídeo, añadimos algunas propiedades: loop autoPlay muted playsInline. Hasta ahora, esto debería conseguir un vídeo en bucle en la página que se reproduce automáticamente sin sonido.

Ahora los estilos:

.video-container { position: relative;}.video-container video {margin: auto; display: block; clip-path: url(#videoText); width: 640px;}.video-container svg { width: 0; height: 0; position: absolute;}

La propiedad más importante aquí es clip-path.

La propiedad CSS clip-path crea una región de recorte que establece qué parte de un elemento debe mostrarse. Las partes que están dentro de la región se muestran, mientras que las que están fuera se ocultan. – MDN Docs

Esto tendrá un poco más de sentido después de añadir el SVG, pero básicamente queremos utilizar la ruta del SVG como la región para recortar nuestro video, como se hace referencia por el valor url(#videoText).

Ahora necesitamos un SVG. Hay toneladas de diferentes maneras de crear y exportarlas, pero yo suelo usar Figma o Sketch. Todo lo que realmente necesita hacer es añadir algo de texto en su programa de elección y exportarlo como un SVG.

El SVG que uso a continuación es un ejemplo simplificado. El tuyo tendrá las propiedades habituales xmlns, viewBox y path.

Una vez que tengas un SVG exportado, hay unos cuantos añadidos que hacer. En primer lugar, tenemos que añadir un elemento clipPath alrededor de la ruta.

El elemento <clipPath> SVG define una ruta de recorte que será utilizada por la propiedad clip-path.Una ruta de recorte restringe la región a la que se puede aplicar la pintura. Conceptualmente, las partes del dibujo que se encuentran fuera de la región delimitada por la ruta de recorte no se dibujan. – MDN Docs

A un alto nivel, no es muy diferente de la propiedad background-clip que utilizamos en los ejemplos anteriores.

<svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg>

El elemento clipPath debe tener un ID que coincida con el que añadimos en nuestro CSS: videoText. También necesita una propiedad y un valor clipPathUnits="objectBoundingBox".

Lo último que hay que añadir son unos valores transform. Necesitamos estos porque el propio SVG se establece intencionalmente a una altura y anchura de 0 con el CSS que hemos añadido. Debido a eso, tenemos que escalar la ruta de nuevo para que sea visible.

Para obtener los valores de escala, dividir 1 por la altura y la anchura. Como el texto de mi ejemplo tiene un ancho de 640px y un alto de 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Es posible que tengas que experimentar un poco con esto dependiendo del ancho y el alto que quieras.

Por último, añadir el SVG terminado en el .video-container div.

<div class="video-container"><svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg><video>...</video></div>

CSS Split Color Text#

Para nuestro último ejemplo, vamos a crear un efecto de texto de color dividido. Es probable que haya algunas maneras diferentes de hacer esto, pero pude lograrlo con lo siguiente.

Primero, necesitamos un h1, excepto que esta vez le agregamos un atributo data. Verás por qué en un minuto. También queremos asegurarnos de que hay un div alrededor de la h1.

<div class="split-text-container"><h1 data-text="Split Colors">Split Colors</h1></div>

Ahora para los estilos.

.split-text-container { position: relative;}h1 { color: #fff;}h1::before { content: attr(data-text);clip-path: polygon(0px 105%, 93% 0%, 100% 100%);margin: 0;color: #ff6161;position: absolute; top: 0; left: 0; right: 0;}

Hay dos partes importantes aquí:

1. El uso de la función CSS attr(). La función obtiene un atributo del elemento seleccionado y nos permite utilizar ese valor en CSS. En nuestro caso, queremos el atributo data-text que hemos añadido para poder utilizarlo en la propiedad content. Esto nos da dos elementos de texto para trabajar: el h1 original y el elemento psuedo.

2. La propiedad clip-path. En el ejemplo anterior, utilizamos un SVG independiente como valor de esta propiedad. Estamos haciendo algo similar, excepto el uso de una forma polygon. Esto es lo que da la apariencia de que el color del texto está “dividido”. Estamos utilizando la forma de este polygon para recortar el texto del pseudo elemento rojo para que sea sólo parcialmente visible, y luego posicionarlo en la parte superior del texto blanco h1 utilizando el posicionamiento absoluto.

Finalmente, una última adición es asegurarse de que el texto sigue siendo seleccionable.

h1::before {...pointer-events: none; /* Make text selectable */}

Sin la propiedad pointer-events, el pseudoelemento en realidad está impidiendo que parte de nuestro texto sea seleccionado.

Summary#

Y ahí lo tienes: ¡cinco efectos diferentes de recorte y enmascaramiento CSS para probar en tu próximo proyecto! Los ejemplos que cubrimos realmente sólo arañan la superficie de las cosas que puedes hacer con estas propiedades. Algunas otras opciones podrían implicar el uso de texturas, SVGs más elaborados y diferentes tipos de animación.