CSS: La Guía Definitiva, 5ª Edición

Capítulo 9. Gradientes

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Los tres tipos de imágenes definidos por CSS se describen completamente con CSS: degradados lineales, degradados radiales y degradados cónicos. Cada tipo tiene dos subtipos: repetitivos y no repetitivos. Los degradados se utilizan más a menudo en fondos, aunque pueden utilizarse en cualquier contexto en el que se permita una imagen, como en list-style-image y border-image, por ejemplo.

Un degradado es una transición visual de un color a otro. Un degradado de amarillo a rojo empezará en amarillo, pasará sucesivamente por menos amarillo, tonos más rojizos de naranja y, finalmente, llegará a un rojo pleno. Lo gradual o abrupta que sea la transición depende de la cantidad de espacio que tenga el degradado y de la forma en que definas las paradas de color y las pistas de progresión de color. Si pasas del blanco al negro a lo largo de 100 píxeles, cada píxel a lo largo de la progresión por defecto del degradado será otro 1% gris más oscuro, como se muestra en la Figura 9-1.

Figura 9-1. La progresión de un gradiente simple

A medida que avancemos en el proceso de exploración de los degradados, ten siempre esto presente: los degradados son imágenes. No importa que los describas escribiendo CSS -son tan imágenes como los SVG, PNG, JPEG, etc.-, pero ...