Cambiar la imagen y el color de fondo de una página en función del mes
Javascript, jQuery y CSSEstilos
El enunciado lo dice todo: la página tiene que tener una imagen de fondo con una capa de color superpuesta (lo que se denomina en jerga de diseño overlay) al 90%, de modo que dispongo de 12 imágenes en blanco y negro y 12 códigos de color, una imagen y un código para cada mes.
Necesito programar de algún modo que, en función del mes en el que nos encontremos, se modifique el fondo de la página y el color superpuesto.
Te dejo un par de pistas:
- Clases CSS
- linear-gradient
¿Te atreves a intentarlo? ¡Espero tus propuestas en los comentarios!
Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…
Pepe says
No estoy seguro si era esto lo que pedias https://jsfiddle.net/3q6hbyzf/
didacticode says
¡Hola, Pepe!
¡Muy buena respuesta, y rapidísima! ¡Buen trabajo!
La verdad es que me ha parecido muy curioso el modo de hacerlo con sections
¿Te has planteado aplicar los estilos directamente sobre el body?
Y por otro lado, ¿crees que podrías haber juntado los dos estilos del mismo mes en uno?
Por darle una vuelta a tu código
¡Enhorabuena!
Pepe says
He intentado aplicar lo que me has comentado y he hecho esta otra versión https://jsfiddle.net/0jx358e7/
didacticode says
¡Ea! ¡Me gusta, Pepe!
Sebastian says
Este código lo veo mucho más “adecuado” que las otras opciones, ya que si al diseñador le piden la tarea de cambiar las imágenes por otras, este solo tendría que ir a su CSS.
didacticode says
¡Hola, Sebastián!
Efectivamente, hay que poner las cosas fáciles para que los posibles cambios sean lo más rápidos y eficientes posibles.
Imagino que has visto la solución propuesta pero en cualquier caso, ya sabes, te animo a que propongas la tuya
Dani Armando says
Hola, en sí hice lo que pedía el ejercicio, sólo que hice unas ligeras modificaciones, espero que te guste, y por favor, juzga mi código.
https://github.com/daniarmandorsweb/didactiretos.git
didacticode says
¡Una idea genial, Dani! La verdad es que nunca he visto trabajar con var en CSS y siempre he sentido curiosidad. Tu propuesta me parece muy buena porque el cógido es eficiente (no creas una clase por cada mes sino que la adaptas en función del número del mes).
Verás en mi propuesta que comento hacerlo parecido a ti (utilizando números para los meses) aunque propongo otra solución, entre otras cosas, porque las imágenes con las que tengo que trabajar deben tener esa URL.
Pero sin duda, muy buena propuesta, Dani, ¡enhorabuena!