¿Cómo crear un generador de color de degradado lineal usando HTML, CSS y JavaScript?

background-gradient-color

El generador de fondo se puede hacer usando HTML , CSS y JavaScript . Generará un fondo degradado basado en los valores que seleccione. Agregaremos dos archivos, a saber, style.css y script.js para agregar CSS y JS a nuestro HTML (index.html) . Hemos utilizado una etiqueta h3 vacía para que podamos mostrar los códigos de color de gradiente lineal.

Código HTML: guarde el código en un archivo como index.html . En el archivo index.html , usaremos dos entradas de tipo «color» para obtener los valores de los gradientes.

<!DOCTYPE html>
<html>
  
<head>
    <title>Gradient color generator</title>
</head>
  
<body class="change">
    <h1>GeeksforGeeks</h1>
    <h3>Gradient color generator</h3>
  
    <b>Current Colors for Gradient Background:</b>
  
    <!-- Default color for gradient -->
    <input class="color1" type="color" value="#0000ff" />
    <input class="color2" type="color" value="#add8e6" />
</body>
  
</html>

Código CSS: para CSS, solo hemos realizado algunos estilos básicos con algunas fuentes y un color de fondo predeterminado. Puede usar la siguiente hoja de estilo como referencia para crear sus propios estilos personalizados cambiando algunas fuentes y colores.

<style>
    /* Styling body */
    body {
        font: "Roboto";
        text-align: center;
        background: linear-gradient(to right, #0000ff, #add8e6);
    }
     
    /* h1 tag text color */
    h1 {
      color: white;
    }
    </style>

Código JavaScript: ahora viene la parte de JavaScript. Lo primero que hemos hecho es seleccionar los Nodes color1 y color2 usando el método document.querySelector() . Usando el mismo método, también hemos seleccionado el h3 y el cuerpo. Si no sabe cómo funciona el querySelector, le recomendamos que primero aprenda sobre esto. Ahora creamos una función para establecer un degradado recién seleccionado como fondo. En esta función, simplemente aplicamos valores que obtenemos usando document.querySelector() al fondo. Hemos usado css.textcontent para asignar el valor de gradiente lineal a la etiqueta h3.

<script>
    var css = document.querySelector("h3");
    var color1 = document.querySelector(".color1");
    var color2 = document.querySelector(".color2");
    var body = document.querySelector(".change");
      
    // Changing color for the gradient
    function changeGradient() {
        body.style.background =
            "linear-gradient(to right, " 
                + color1.value + ", " 
                + color2.value + ")";
  
        css.textContent = body.style.background + ";";
    }
  
    color1.addEventListener("input", changeGradient);
  
    color2.addEventListener("input", changeGradient);
</script>

Código completo: Es la combinación del código de tres secciones de avobe.

<!DOCTYPE html>
<html>
  
<head>
    <title>Gradient color generator</title>
  
    <style>
        body {
            font: "Roboto";
            text-align: center;
            background: linear-gradient(to right,
                        #0000ff, #add8e6);
        }
      
        h1 {
            color: white;
        }
    </style>
</head>
  
<body class="change">
    <h1>GeeksforGeeks</h1>
    <h3>Gradient color generator</h3>
      
    <b>Current Colors for Gradient Background:</b>
      
    <!-- Default color for gradient -->
    <input class="color1" type="color" value="#0000ff" />
    <input class="color2" type="color" value="#add8e6" />
  
    <script>
        var css = document.querySelector("h3");
        var color1 = document.querySelector(".color1");
        var color2 = document.querySelector(".color2");
        var body = document.querySelector(".change");
  
        // Changing color for the gradient
        function changeGradient() {
            body.style.background =
                "linear-gradient(to right, " 
                    + color1.value + ", " 
                    + color2.value + ")";
  
            css.textContent = body.style.background + ";";
        }
  
        color1.addEventListener("input", changeGradient);
  
        color2.addEventListener("input", changeGradient);
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta