Cómo hago que el background del header y el background del body se vea como uno solo gradient?

Mariela de Jesus Rivas Hernandez

Pregunta

student•hace 5 años

Mariela de Jesus Rivas Hernandez

student•hace 5 años

Gracias compañeros!!!

rusbel bermúdez rivera

student•hace 5 años

Hola te recomiendo este super recurso para todo lo relacionado en CSS https://css-tricks.com/css3-gradients/

Te dejo un ejemplo sencillo, y un recurso bastante util para crear gradientes https://www.css-gradient.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradiente Example</title>

<style>


body {
    height: 100vh;
background : linear-gradient(to bottom right, #E42794, #04B5A2);
}

.header {
    height: 30px;
    border: yellow solid 1px;
}

.contenido {
    height : 90vh;
    border : blue solid 1px;
}


.footer {
    height: 30px;
border : white solid 1px;
}

</style>
</head>
<body>
    <header class="header">
        <p>Hola soy Header</p>
    </header>
    <main>
            <section class="contenido">
                Hola yo soy el contenido
            </section>
    </main>
    <footer class="footer">
        Hola soy el footer
    </footer>
</body>
</html>

Mauricio Moreno Morales

student•hace 5 años

Sí quieres que dos areas ocupen el mismo color puedes hacer un

body, header {
	background: linear-gradient(#e66465, #9198e5);
}

Más adelante en el curso irás viendo que todo va tomando forma :)

Cómo hago que el background del header y el background del body se vea como uno solo gradient?

Curso de Frontend Developer

Curso de Frontend Developer