Aunque los degradados o gradientes ya no son tan utilizados como antes, todavía pueden ser un muy buen elemento visual en nuestros sitios y aplicaciones, si se utilizan correctamente. Por eso mismo, hoy revisaremos las opciones que tiene CSS para generarlos ¿Listos? ¡Manos a la obra!
Tabla de Contenido
¿Cómo funciona el degradado lineal?
Parar lograrlo, utilizaremos como background la propiedad linear-gradient que lleva al menos 3 parámetros:
- Dirección: Es opcional y lleva cualquiera de los siguientes valores:
- to right – A la derecha
- to left – A la izquierda
- to top – Hacia arriba
- to bottom – Hacia abajo
- angle: Cualquier ángulo de -360deg a 360deg
- Color 1: El primer color, puede ser en mnemónico, hexadecimal o RGB
- Color 2: El segundo color, puede ser en mnemónico, hexadecimal o RGB
Se pueden añadir más colores si se busca un gradiente más colorido e incluso a cada color se le puede añadir un porcentaje de presencia.
Hagamos pruebas con el degradado lineal
Hagamos un archivo HTML nuevo y añadimos un etiqueta <style></style> para hacer nuestras pruebas. Dentro de ella, apliquemos un degradado al body del documento:
body{
background: linear-gradient(red, yellow);
}
Y… no se ve muy convincente.
Corrijamos eso haciendo algunos ajustes. Primero necesitamos que la etiqueta <html> tenga un height de 100%
html{
height: 100%;
}
Luego a nuestro body, le heredamos el height de su parent y eliminamos los márgenes.
body{
height: inherit;
margin: 0;
background: linear-gradient(red, yellow);
}
¡Ahora ya se ve mejor!
Movamos el degradado a la derecha:
background: linear-gradient(to right, red, yellow);
Ahora de arriba a la izquierda:
background: linear-gradient(to top left, red, yellow);
¿Qué tal si le damos un ángulo de 45 grados?
background: linear-gradient(45deg, red, yellow);
Démosle una transparencia del 50%
background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(255,255, 0, 0.5));
Finalmente, añadamos un color verde que ocupe el 60% del degradado
background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(255,255, 0, 0.5), green 60%);
¿Cómo funciona el degradado radial?
Similar al degradado lineal, tenemos diferentes valores que se pueden combinar:
- Forma: Es opcional, puede ser circle (círculo) o ellipse (elipse)
- Tamaño: Es opcional, se refiere al tamaño y ubicación del radio, los valores pueden ser:
- closest-side: El lado más cercano
- farthest-side : El lado más lejano
- closest-corner: La esquina más cercana
- farthest-corner: La esquina más lejana
- Color 1: El primer color, puede ser en mnemónico, hexadecimal o RGB
- Color 2: El segundo color, puede ser en mnemónico, hexadecimal o RGB
Los colores también se pueden definir en porcentajes si es necesario.
Hagamos pruebas con el degradado radial
Comencemos con un degradado simple:
background: radial-gradient(red, yellow);
Lo hacemos circular y que el amarillo ocupe el 60%
background: radial-gradient(circle, red, yellow 60%);
Enviamos 60% al lado más lejano y añadimos un tercer color:
background: radial-gradient(farthest-side at 60%, red, yellow, orange);
Finalmente, lo hacemos circular, le ponemos 7% de amarillo y 20% de naranja
background: radial-gradient(circle, red, yellow 7%, orange 20%);
Consideraciones finales
Es importante notar, que el truco que se hizo al principio sólo aplica para el <body> ya que en algunos navegadores no se interpreta correctamente sin esto. En cualquier otro tipo de etiqueta funciona normalmente. También es necesario considerar las funciones repeating-radial-gradient y repeating-linear-gradient que sirven para repetir el degrado.
¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.
Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.
