• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉN SOY
  • FAQ
  • ACCEDER
  • CONTACTO

Reto: cambiar fondo de página en función del mes

Publicado el 01/02/2021 por Ada 9 Comments

background

Cambiar la imagen y el color de fondo de una página en función del mes

Javascript, jQuery y CSS

Estilos


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…

Filed Under: Reto Tagged With: css, javascript, jquery

Reader Interactions

Comments

  1. Pepe says

    04/02/2021 at 17:03

    No estoy seguro si era esto lo que pedias https://jsfiddle.net/3q6hbyzf/

    Accede para responder
    • didacticode says

      04/02/2021 at 17:46

      ¡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!

      Accede para responder
      • Pepe says

        05/02/2021 at 17:25

        He intentado aplicar lo que me has comentado y he hecho esta otra versión https://jsfiddle.net/0jx358e7/

        Accede para responder
        • didacticode says

          02/03/2021 at 01:01

          ¡Ea! ¡Me gusta, Pepe!

          Accede para responder
    • Sebastian says

      15/05/2021 at 03:57

      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.

      Accede para responder
      • didacticode says

        20/05/2021 at 07:28

        ¡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

        Accede para responder
  2. Dani Armando says

    05/02/2021 at 04:07

    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

    Accede para responder
    • didacticode says

      12/02/2021 at 23:01

      ¡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!

      Accede para responder

Trackbacks

  1. Reto resuelto: fondo de página en función del mes dice:
    10/02/2021 a las 23:18

    […] semana pasada nos enfrentábamos a un nuevo reto: cambiar el fondo de una página de manera que tuviera una imagen de fondo con una capa de color […]

    Accede para responder

Deja una respuesta Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2023

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.