Cómo repetir texto como imagen de fondo en CSS usando element()

Hay una tendencia de diseño que he visto aparecer por todas partes. Quizás tú también lo hayas visto. Es este tipo de cosas en las que el texto se repite una y otra vez. Un buen ejemplo es el sitio web de comparación de precios GoCompare, que lo utilizado en una importante campaña publicitaria multicanal.

Nike también lo ha utilizado, como en este anuncio:

No puedo evitar preguntarme cómo implementaría este tipo de diseño para la web. Quiero decir, obviamente podríamos simplemente repetir el texto en el marcado. También podríamos exportar el diseño como una imagen usando algo como Photoshop, pero poner texto en las imágenes es malo tanto para el SEO como para la accesibilidad. Luego está el hecho de que, incluso si usáramos texto real, no es como si quisiéramos que un lector de pantalla lo dijera.

Versatilidad
Versatilidad
Versatilidad
Versatilidad

Vale, ¡para ya!

Estas consideraciones hacen que parezca poco realista hacer algo como esto en la web. Luego me encontré suspirando por la función element() de CSS que existe desde hace mucho tiempo, pero que no cuenta con suficiente soporte. Permite el uso de cualquier elemento HTML como imagen de fondo, ya sea un elemento de un solo botón o un divcontenido completo.

Según la especificación:

La función element() solo reproduce la apariencia del elemento al que se hace referencia, no el contenido real y su estructura. Los autores sólo deben utilizarlo con fines decorativos.

Para nuestros propósitos, haríamos referencia a un elemento de texto para obtener ese efecto repetitivo.

Definimos una ID que podemos aplicar al elemento de texto que queremos repetir. Llamémoslo #thingy. Tenga en cuenta que cuando usemos #thingy, debemos anteponer el element()valor con -moz-. Si bien element()Firefox es compatible desde 2010, lamentablemente no ha llegado a ningún otro navegador desde entonces.

.element {  background-image: -moz-element(#thingy);}

Aquí hay una recreación un tanto vaga del anuncio de Nike que vimos antes. Nuevamente, se requiere Firefox para ver la demostración según lo previsto.

¿Ves cómo funciona eso conceptualmente? Coloqué un elemento ( #versatility) en la página, lo oculté dándole altura cero, lo configuré como background-imageen el cuerpo y luego usé la background-repeatpropiedad para duplicarlo verticalmente en la página.

El element()fondo está en vivo. Eso significa que la background-imageapariencia del objeto que lo usa cambiará si cambia el elemento HTML al que se hace referencia. Es el mismo tipo de trato cuando se trabaja con propiedades personalizadas: cambie la variable y se actualizará en todos los lugares donde se use.

Por supuesto, existen otros casos de uso para esta propiedad. Vea cómo Preethi lo us para realizar navegación de desplazamiento dentro de la página de un artículo. También puedes usar un elemento de lienzo HTML como fondo si quieres algo más cómodo. Una forma en que lo he usado es mostrar capturas de pantalla de páginas en una tabla de contenido. Vincent De Oliveira, ha documentado algunos ejemplos tremendamente creativos. Aquí tienes un efecto de reflejo de imagen, si te gusta el diseño web retro:

Bastante bonito, ¿verdad? Nuevamente, me gustaría poder decir que este es un enfoque listo para producción para lograr ese efecto de diseño elegante, pero las cosas son como son en este momento. En realidad, ese es un buen recordatorio para hacer oír su voz sobre las funciones que le gustaría que se implementaran en los navegadores. Hay tickets abiertos en WebKit y Chromium donde puedes hacerlo. Con suerte, eventualmente tendremos esta función en los navegadores Safari-world y Chrome-world.