Teoría
Teoría

Proporciones y paradas de color

De forma predeterminada, los colores de un degradado se distribuyen uniformemente, en las mismas proporciones, pero podemos cambiar este comportamiento.

Para ello se usan las llamadas paradas de color. Cada una consta de un color y, opcionalmente, una posición escrita a continuación, por ejemplo, red 0%, yellow 100%.

La posición de una parada de color se puede indicar en porcentajes, píxeles y otras unidades. Veamos algunos ejemplos para entender cómo se comportan las paradas de color:

`yellow, green`
`yellow 0%, green 100%`
`yellow 0%, green 50%`
`yellow 50%, green 100%`
`yellow 25%, green 75%`
`red, yellow, green`
`red 0%, yellow 50%, green 100%`
`red 33%, yellow 66%, green 100%`

Una parada de color indica qué color debe haber en una posición concreta del degradado.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Proporciones y paradas de color</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="flag"></div> </body> </html>

CSS

body { background-color: #f5f5f5; } .flag { margin: 100px auto; width: 360px; height: 240px; background-image: none; box-shadow: 1px 1px 3px #333333; }

ObjetivosRealizado

Primero, asigna a .flag un degradado lineal de arriba hacia abajo
con cuatro colores: #ffffff, #1199ff, #0039a6, #d52b1e.
Después, indica estas posiciones para los colores: 25%, 50%, 75% y 100%.