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

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:

¡Cavando esa naranja! (La fuente)

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.

Otras propiedades para el background

CSS Background

https://css-tricks.com/snippets/css/transparent-background-images/

No hay una propiedad CSS background-opacity, pero puede simularla insertando un pseudo elemento con una opacidad regular del tamaño exacto del elemento detrás de él. div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: “”; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index:

Ver más »
CSS Background

Formas de imagen de fondo

La siguiente es una publicación invitada de Joseph Markus. Joseph tenía un diseño particular que necesitaba implementar para el sitio web Britain on Film de BFI. Como un verdadero desarrollador de front-end, Joseph tomó en cuenta los requisitos y pasó por muchas opciones diferentes para encontrar el mejor enfoque. Él nos guiará a través de

Ver más »
CSS Background

Nueva encuesta: el caso del desorden gigante

Suponga que ha diseñado una página web y utiliza una imagen de fondo de página completa. Realmente te gusta el aspecto del sitio con esta imagen de fondo. El se parece increíble. Pero la imagen es 350k. Ha decidido que aunque sabe que es pesado, vale la pena. Pero luego empiezas a pensar en dispositivos

Ver más »
Ir arriba