Inicio Apuntes FPApuntes DAW Generador de degradados. Crea el tuyo con JavaScript

Generador de degradados. Crea el tuyo con JavaScript

Utilizando HTML, JavaScript y CSS

Publicado por entreunosyceros

Una vez más aquí. Hoy vengo a dejar un pequeño proyecto que como desarrollador web me viene muy bien tener a mano. Pues en mi caso, me encanta meter degradados en muchos de los proyectos que hago. Si este es también tu caso, seguro que te vendrá bien tener a mano un pequeño generador de degradados.

En las siguientes líneas vamos a ver el código necesario, con el que cualquiera podrá crear un generador de colores degradados utilizando tan solo HTML, CSS y JavaScript. En este generador, que cualquier con un mínimo de conocimientos podrá utilizar de forma eficiente, cualquiera podrá obtener el código CSS para crear un fondo degradado. Esta aplicación web, nos va a permitir generar colores de forma aleatoria, o seleccionando los colores que nos interese.

Pasos para crear un generador de degradados usando JavaScript

Generador de degradados

Para llevar a cabo este proyecto, vamos a utilizar HTML, CSS y JavaScript. Empezaremos por crear una carpeta en la que guardar los tres archivos de este proyecto. A continuación vamos a crear index.html, style.css y script.js.

Archivo index.html

El código que vamos a guardar dentro del archivo index.html, es una página web escrita en HTML, que utiliza CSS y JavaScript para crear el generador de degradados. El código que vamos a añadir a este archivo, es el siguiente:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generador de degradados en JavaScript</title>
    <link rel="icon" type="image/jpg" href="./Img/favicon.ico" />
    <link rel="stylesheet" href="./assets/style.css">   
  </head>
  <body>
    <div class="titulo" title="made in entreunosyceros.net">Generador de degradados</div>
    <div class="wrapper">
      <!-- Vista previa del degradado seleccionado -->
      <label for="gradient-box">Vista previa</label>
      <div class="gradient-box"></div>
      <div class="row options">
        <!-- Opciones de degradado -->
        <div class="column direction">
          <label for="select-box">Opciones</label>
          <div class="select-box">
            <select>
              <option value="to top" selected>Arriba</option>
              <option value="to right top">Derecha arriba</option>
              <option value="to right">Derecha</option>
              <option value="to right bottom">Derecha abajo</option>
              <option value="to bottom">Abajo</option>
              <option value="to left bottom">Izquierda abajo</option>
              <option value="to left">Izquierda</option>
              <option value="to left top">Izquierda arriba</option>
            </select>
          </div>
        </div>
        <div class="column palette">
          <!-- Paleta de colores -->
          <label for="colors">Colores</label>
          <div class="colors">
            <input type="color" value="#33d17a">
            <input type="color" value="#c01c28">
          </div>
        </div>
      </div>
      <!-- Código degradado generado -->
      <label for="row">Degradado generado</label>
      <textarea class="row" disabled>background-image: linear-gradient(to left top, #977DFE,  #6878FF);</textarea>
      <!-- Botones de acción -->
      <label for="row buttons">Opciones</label>
      <div class="row buttons">
        <button class="refresh" title="Colores aleatorios">Colores aleatorios</button>
        <button class="copy" title="Copiar código">Copiar código</button>
      </div>
    </div>
    <script src="./assets/script.js" defer></script>    
  </body>
</html>

Archivo script.js

Continuamos creando el archivo script.js, el cual vamos a crear dentro de la carpeta assets. Este código JavaScript se encarga de manipular la apariencia y la funcionalidad del generador de degradados que estamos creando.

El código usa el método querySelector() para seleccionar elementos del documento HTML, como el contenedor de la vista previa del degradado, el menú desplegable de opciones de degradado, los campos de entrada de color, el cuadro de texto del código generado y los botones de acción.

La función generateGradient() se encarga de generar el código del degradado en función de los valores de entrada del menú desplegable y los campos de entrada de color. También puede generar nuevos colores aleatorios y actualizar la vista previa del degradado. El valor generado se aplica al fondo del contenedor de la vista previa del degradado, y se muestra en el cuadro de texto del código generado.

Se añaden manejadores de eventos a los campos de entrada de color y al menú desplegable de opciones de degradado. Así se actualiza la vista previa del degradado cada vez que cambia un valor.

El botón «Refrescar» también tiene un manejador de eventos que llama a generateGradient() para generar nuevos colores aleatorios y actualizar la vista previa del degradado.

El botón «Copiar código» tiene un manejador de eventos que llama a navigator.clipboard.writeText() para copiar el código generado en el cuadro de texto en el portapapeles. También cambia el texto del botón temporalmente para indicar que el código se ha copiado.

Dentro de este archivo vamos a pegar el siguiente código:

const gradientBox = document.querySelector(".gradient-box");
const selectMenu = document.querySelector(".select-box select");
const colorInputs = document.querySelectorAll(".colors input");
const textarea = document.querySelector("textarea");
const refreshBtn = document.querySelector(".refresh");
const copyBtn = document.querySelector(".copy");

const generateGradient = (isRandom) => {
  const getRandomColor = () => {
    // Generando un color aleatorio en formato hexadecimal. Ejemplo: #5665E9.
    const randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
    return `#${randomHex}`;
  }
  
  if (isRandom) {
    // Si isRandom es verdadero, actualiza el valor de entrada de colores con un color aleatorio.
    colorInputs[0].value = getRandomColor();
    colorInputs[1].value = getRandomColor();
  }
  // Creando una cadena degradada utilizando el valor del menú de selección junto con los valores de entrada de color.
  const gradient = `linear-gradient(${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
  gradientBox.style.background = gradient;
  textarea.value = `background: ${gradient};`;
}

// Cada vez que se cambia el valor de un elemento de entrada de color, se actualiza la vista previa del degradado.
colorInputs.forEach(input => {
  input.addEventListener("input", () => generateGradient(false));
});

selectMenu.addEventListener("change", () => generateGradient(false));

// Cuando se hace clic en el botón "Refrescar", se generan dos nuevos colores aleatorios y se actualiza la vista previa del degradado.
refreshBtn.addEventListener("click", () => generateGradient(true));

//Cuando se activa el evento, se llama a la función navigator.clipboard.writeText() para copiar el valor del cuadro de texto textarea en el portapapeles.
copyBtn.addEventListener("click", () => {
  navigator.clipboard.writeText(textarea.value);
  copyBtn.innerText = "Código copiado";
  setTimeout(() => {
    copyBtn.innerText = "Copiar código";
  }, 1800);
});

Archivo style.css

Para terminar vamos a añadir los siguientes códigos CSS a al archivo style.css, que también tendremos que guardar dentro de la carpeta assets. Estas reglas CSS serán las que utilicemos para diseñar y hacer que el generador de gradientes sea visualmente atractivo. Dentro del archivo, solo tendremos que pegar el siguiente código:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Comic Sans MS', sans-serif;
}
body {
  padding: 0 10px;
  display: grid;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to top, #8000ff, #5a00a1);
}

/*Envoltorio*/
.wrapper {
  width: 450px;
  padding: 25px;
  background: #e3e3e3;
  border-radius: 10px;
  box-shadow: 15px 35px 50px rgba(0,0,0,0.9);
  border: 11px solid #f00;
}
.wrapper .gradient-box {
  height: 220px;
  width: 100%;
  border-radius: 7px;
  background: linear-gradient(to left top, #33d17a, #c01c28);
  border:1px solid #000000;
}
.wrapper .row {
  display: flex;
  margin: 20px 0;
  justify-content: space-between;
}

/*Opciones*/
.options p {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.row :where(.column, button) {
  width: calc(100% / 2 - 12px);
}
.options .select-box {
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #000000;
}
.select-box select {
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.12rem;
  background: none;
}
.options .palette {
  margin-left: 60px;
}
.palette input {
  height: 41px;
  width: calc(100% / 2 - 20px);
}
.palette input:last-child {
  margin-left: 6px;
}

/*Degradado generado*/
.wrapper textarea {
  width: 100%;
  color: #333;
  font-size: 1.05rem;
  resize: none;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid #000000;
}

/*Botones*/
.buttons button {
  padding: 15px 0;
  border: none;
  outline: none;
  color: #fff;
  margin: 0 0 -15px;
  font-size: 1.09rem;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
  border: 1px solid #000;
}
.buttons .refresh {
  background: #ff0800;
}
.buttons .refresh:hover {
  background: #7e0000;
}
.buttons .copy {
  background: #5838d8;
}
.buttons .copy:hover {
  background: #2800c7;
}

/*Título*/
.titulo {
  box-sizing: border-box;
  padding: 0px;
  border: none;
  font: normal 38px / normal "Warnes", Helvetica, sans-serif;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  white-space: pre;
  text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
    0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
    0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  width: 100%;
  margin-top: 10px;
}
.titulo:hover {
  text-shadow: 0 0 10px rgb(69, 0, 109), 0 0 20px rgb(73, 0, 95),
    0 0 30px rgb(57, 0, 68), 0 0 40px #580054, 0 0 70px #000000,
    0 0 80px #000000, 0 0 100px #000000;
}

/*Pantallas pequeñas*/
@media screen and (max-width: 474px) {
  .wrapper {
    padding: 20px 20px;
    width: 300px;
  }
  .row :where(.column, button) {
    width: calc(100% / 2 - 8px);
  }
  .options .select-box {
    padding: 8px 15px;
  }
  .options .palette  {
    margin-left: 40px;
  }
  .options .colors {
    display: flex;
    justify-content: space-between;
  }
  .palette input {
    width: calc(100% / 2 - 5px);
  }
  .palette input:last-child {
    margin-left: 0;
  }
  .titulo{
    font: normal 25px / normal "Warnes", Helvetica, sans-serif;
  }
}

Si sigues los pasos indicados en este artículo, ya tendrás creado con éxito un generador degradados utilizando HTML, CSS y JavaScript. Solo será necesario hacer doble clic en el archivo index.html para ver el proyecto en el navegador web. En caso de querer descargar el código completo de este proyecto, puedes dirigirte al repositorio en GitHub en el que lo he subido.

Los que quieran ver funcionando este generador de degradados antes de crear el proyecto en su equipo, pueden verlo en la sección de ejemplos de esta página.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.