Teoría
Teoría

¡Hola, linear-gradient!

En matemáticas, el gradiente es una función que indica la dirección en la que aumenta más rápidamente una magnitud cuyo valor cambia de un punto del espacio a otro.

Si llevamos esta idea al color, obtenemos una transición suave de un color a otro. Por ejemplo, esta:

Los degradados se indican como valores de la propiedad CSS background-image. Un degradado sencillo se puede escribir así:

background-image: linear-gradient(yellow, green);

El degradado se crea con la función linear-gradient, cuyos parámetros indican la dirección del degradado y una lista de colores. La dirección se puede omitir; en ese caso se usa la predeterminada: de arriba hacia abajo. La lista puede contener tantos colores como quieras.

Vamos a practicar creando un degradado sencillo de dos colores para el bloque .content.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>¡Hola, linear-gradient!</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <h1>¡Hola, linear-gradient!</h1> </div> </body> </html>

CSS

html, body { margin: 0; height: 100%; } .content { height: 100%; background-color: yellow; } h1 { margin: 0; padding-top: 250px; text-align: center; font-size: 30px; font-family: "Georgia", serif; }

ObjetivosRealizado

Añade al bloque .content la propiedad background-image con el valor linear-gradient(yellow, green).