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! Trucos de los Sims 4






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Agregar ilustraciones pseudoaleatoriamente con CSS

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:

programar

es

https://pseint.es/static/images/programar-agregar-ilustraciones-pseudoaleatoriamente-con-css-1419-0.jpg

2024-06-13

 

Agregar ilustraciones pseudoaleatoriamente con CSS
Agregar ilustraciones pseudoaleatoriamente con CSS

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences