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 donde el texto se repite una y otra vez. Un buen ejemplo es el sitio web de comparación de precios, GoCompare, que lo utilizó en una importante campaña publicitaria multicanal.
Nike también lo ha usado, como en este anuncio:
¡Excavando esa naranja! (Fuente)
No pude 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 pronunciara.
Versatilidad
Versatilidad
Versatilidad
Versatilidad
¡Vale, detente ya!
Estas consideraciones hacen que parezca poco realista hacer algo como esto en la web. Luego me encontré anhelando la función element() en CSS, que existe desde hace mucho tiempo, pero que no cuenta con el soporte adecuado. Permite el uso de cualquier elemento HTML como imagen de fondo, ya sea un elemento de un solo botón o un elemento completo. <div> lleno de contenido.
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 solo deben usar esto con fines decorativos.
Para nuestros propósitos, estaríamos haciendo referencia a un elemento de texto para obtener ese efecto de repetición.
Definamos una ID que podamos aplicar al elemento de texto que queremos repetir. llamémoslo #thingy. Tenga en cuenta que cuando usamos #thingy, tenemos que prefijar el element() valor con -moz-. Mientras element() ha sido compatible con Firefox desde 2010, lamentablemente no ha aterrizado en ningún otro navegador desde entonces.
.element {
background-image: -moz-element(#thingy);
}Aquí hay una recreación algo suelta 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 escondió dándole altura cero, configúrelo como el background-image en el cuerpo, luego usó el background-repeat property para duplicarla verticalmente hacia abajo en la página.
El element() el fondo es en vivo. Eso significa que background-image la apariencia de la cosa que lo usa cambiará si el elemento HTML al que se hace referencia cambia. Es el mismo tipo de trato cuando se trabaja con propiedades personalizadas: cambia la variable y se actualiza en todos los lugares donde se usa.
Hay, por supuesto, otros casos de uso para esta propiedad. Vea cómo Preethi lo usó para hacer la navegación de desplazamiento en la página de un artículo. También puede usar un elemento de lienzo HTML como fondo si quiere ser elegante. Una forma en que lo he usado es para mostrar capturas de pantalla de páginas en una tabla de contenido. Vincent De Oliveira, ha documentado algunos ejemplos salvajemente creativos. Aquí hay un efecto de reflejo de imagen, si te gusta el diseño web retro:
Bastante ordenado, ¿verdad? Una vez más, desearía poder decir que este es un enfoque listo para la producción para obtener ese efecto de diseño ordenado, pero las cosas son como son en este momento. En realidad, ese es un buen recordatorio para que se escuche su voz sobre las funciones que le gustaría ver implementadas en los navegadores. Hay tickets abiertos en WebKit y Chromium donde puede hacerlo. Con suerte, eventualmente obtendremos esta función en los navegadores Safari-world y Chrome-world.