Hay una tendencia de diseño que he visto aparecer en todas partes. Quizás también lo hayas visto. Es ese 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 utilizó en una gran campaña publicitaria multicanal.
Nike también lo usó, como en este anuncio:
No pude evitar preguntarme cómo iba a implementar 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 para el SEO y la accesibilidad. Luego está el hecho de que, aunque estamos usando texto real, no queremos que lo diga un lector de pantalla.
Versatilidad
Versatilidad
Versatilidad
Versatilidad
CORRECTO, Detener ¡ya!
Estas consideraciones hacen que parezca poco realista hacer algo como esto en la web. Luego me encontré sin la funcionalidad element () de CSS de larga data, pero con un soporte deficiente. Permite el uso de cualquier elemento HTML como imagen de fondo, ya sea un elemento de botón único o un elemento completo. <div> lleno de contenido.
Según especificaciones:
La función element () solo reproduce la apariencia del elemento referenciado, no el contenido y la estructura reales. Los autores solo deben utilizarlo con fines decorativos.
Para nuestros propósitos, nos referiremos a un elemento de texto para lograr este efecto de repetición.
Definamos una ID que podamos aplicar al elemento de texto que queremos repetir. Vamos a llamarlo #thingy. Tenga en cuenta que cuando usamos #thingy, debemos prefijar el element() valor con -moz-. Mientras que element() se admite en Firefox desde 2010, desafortunadamente no ha aterrizado en ningún otro navegador desde entonces.
.element {
background-image: -moz-element(#thingy);
}Aquí hay una recreación algo imprecisa del anuncio de Nike que vimos anteriormente. Una vez más, Firefox seguramente verá la demostración como se esperaba.
¿Ves cómo funciona conceptualmente? Coloqué un elemento#versatility) en la página, ocúltelo dándole altura cero, configúrelo como background-image en el cuerpo, luego usó el background-repeat propiedad para duplicarlo verticalmente en la página.
los element() el fondo es vivir. Esto significa que el background-image la apariencia del objeto que lo usa cambiará si cambia el elemento HTML referenciado. Es el mismo tipo de acuerdo cuando se trabaja con propiedades personalizadas: cambia la variable y se actualiza donde sea que se use.
Por supuesto, existen otros casos de uso para esta propiedad. Descubra cómo lo utilizó Preethi para crear una navegación de desplazamiento de página de artículo. También puede usar un elemento de lienzo HTML como fondo si desea tener algo de fantasía. 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 extremadamente creativos. Aquí hay un efecto de reflejo de imagen, si te gusta el diseño web retro:
Bastante ordenado, ¿verdad? Una vez más, me gustarí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 lo que son por ahora. De hecho, 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 hacer esto. Espero que nosotros finalmente obtenga esta funcionalidad en los navegadores Safari-world y Chrome-world.
