Agregar ilustraciones pseudoaleatoriamente con CSS

Entre cada post del blog de Eric Meyer hay esta bonita ilustración que aleatoriamente puede ser una de estas cinco opciones:

Eric convirtió cada ilustración en una imagen de fondo separada y luego cambia esa imagen con la nth-of-typepropiedad CSS, así:

.entry:nth-of-type(2n+1)::before {   background-image: url(image-1.png);}.entry:nth-of-type(3n+1)::before {   background-image: url(image-2.png);}.entry:nth-of-type(4n+1)::before {   background-image: url(image-3.png);}.entry:nth-of-type(5n+1)::before {   background-image: url(image-4.png);}

Este parece un buen momento para conectar nuestra pequeña herramienta :nth Tester . Definitivamente me ayuda a entender lo que (2n+1)significa algo así en inglés. Puede escribir cualquier cadena que desee y ver qué efecto tiene en su sitio:

De todos modos, volvamos a la publicación de Eric . Como él menciona, su técnica es pseudoaleatoria en el sentido de que parece una imagen aleatoria en la página, pero técnicamente no lo es. De cualquier manera, ¡creo que es una técnica realmente encantadora! Y ciertamente rompe la monotonía visual que ocurre cuando miras un sitio web durante demasiado tiempo.

Así es como se ve en la práctica:

¡Cosas encantadoras!

Otra forma de hacerlo es utilizar números aleatorios en CSS . Por ejemplo, podríamos configurar una variable en JavaScript y luego aplicarla con propiedades personalizadas de CSS. O podríamos poner todas las imágenes en un solo archivo de sprites y cambiarlas background-positionen función de un número aleatorio.

Esta es definitivamente una de esas cosas en CSS donde no hay respuestas incorrectas; ¡Simplemente diferentes formas de hacer lo mismo increíble!

Si quieres conocer otros artículos parecidos a Agregar ilustraciones pseudoaleatoriamente con CSS puedes visitar la categoría CSS.