El texto "knockout" —ese que parece recortado de una superficie para revelar el fondo— es un efecto de diseño fantástico para tu sitio web. Y con solo un poco de código personalizado, Webflow hace que sea rápido y sencillo.
Actualización: ¡Ahora puedes rellenar texto de forma nativa con degradados, imágenes y superposiciones usando el recorte de fondo! Échale un vistazo aquí.
La forma más directa de crear texto "knockout" es con la propiedad background-clip. En este artículo, te mostraremos cómo usar CSS background-clip en Webflow.
Pero primero, veremos rápidamente por qué deberías usar texto HTML real y la propiedad background-clip en lugar de un gráfico personalizado, además de algunas razones por las que quizás no puedas usar este efecto en proyectos de producción.
Cómo solía crear texto "knockout": en Photoshop
Antes de descubrir cómo usar Webflow para crear texto "knockout", solía hacerlo a mano en Photoshop. Enmascaraba el texto sobre una imagen de fondo y exportaba el gráfico para colocarlo en mi sitio web. Solo tomaba unos minutos y los resultados eran preciosos.
Pero no era un resultado apto para la web, por varias razones:
- Si decidía actualizar el texto, tenía que crear un gráfico completamente nuevo en Photoshop.
- Al ser una imagen estática, el texto no puede ser indexado por Google —un gran problema de SEO, especialmente para los titulares de la página de inicio que solía crear así— ni tampoco se puede copiar y pegar.
- Los archivos de imagen suelen ser bastante pesados, especialmente en resoluciones altas, lo que ralentiza la carga del sitio en conexiones más lentas.
Afortunadamente, existe una opción mejor para crear el efecto de texto "knockout" directamente en la web con -webkit-background-clip y -webkit-text-fill-color.
Cómo creo texto "knockout" ahora: -webkit-background-clip y -webkit-text-fill-color
Para crear una versión de este efecto que sea fácil de actualizar y apta para la web, usaremos dos propiedades CSS:
- -webkit-background-clip, que especifica si la imagen de fondo de un elemento se extiende más allá de su borde.
- -webkit-text-fill-color, que especifica el color de relleno del texto. Si esta propiedad no se establece, se utilizará el valor de la propiedad color.
La propiedad -webkit-text-fill-color, lamentablemente, no es estándar, por lo que no funcionará para todos. Al usarlas juntas, -webkit-background-clip y -webkit-text-fill-color funcionan en navegadores que utilizan el motor webkit, como Chrome, Firefox y Safari. Además, añadir flexbox al texto en sí impide que el estilo se aplique debido a un error conocido.
Así que asegúrate de usar -webkit-text-fill-color para proyectos personales divertidos, no para proyectos web a gran escala donde es importante ofrecer la misma experiencia en todos los navegadores.
A pesar de la falta de compatibilidad entre navegadores, este método tiene una gran ventaja: es texto HTML real, por lo que logra la trifecta de la genialidad en el diseño web:
- Capacidad de búsqueda
- Accesibilidad
- Facilidad de edición
Cómo crear texto con efecto de recorte: la forma más sencilla para la web
Dicho esto, ¡manos a la obra! Es un tutorial bastante sencillo, pero si quieres, puedes clonar mi proyecto de texto con recorte para ver más detalles sobre cómo está construido.
1. Primero, coloca el texto que quieras usar en el lienzo. Yo usé flexbox para centrar el texto vertical y horizontalmente en un contenedor de pantalla completa, pero puedes posicionarlo como prefieras.
2. A continuación, añade un nombre de clase al texto. Puede ser cualquiera, pero yo he llamado a este c-section__heading, porque soy un gran fan de BEM.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
3. Ahora, añade tu imagen de fondo al elemento de encabezado y asegúrate de que el interlineado se extienda por debajo del texto, para que ninguna parte de las letras muestre el color del texto.
4. Luego, abre la pestaña de código personalizado de la página o añade un elemento Embed directamente en ella. Esta segunda opción te permite ver cómo funciona el código personalizado dentro del Diseñador (¡es genial!).
5. Introduce el siguiente código personalizado, sustituyendo .c-section_heading por el nombre de la clase de tu encabezado:
5. Introduce el siguiente código personalizado, sustituyendo .c-section_heading por el nombre de la clase de tu encabezado:
<style>
.c-section__heading {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
</style>
6. Por último, ¡publica tu proyecto para ver el texto recortado con el fondo añadido en tu sitio web!
Compártelo
El texto con efecto knockout es un toque épico para tu sitio y, por suerte, es muy fácil de crear en Webflow.
Ahora, clona este proyecto. Personalízalo y compártelo con nosotros cuando termines. ¡Toma este pequeño sitio de tutoriales y hazlo totalmente tuyo!
