Gradientes radiales
Si en el caso de los gradientes lineales, la transición del color pasa a lo largo de una línea ( la dirección del degradado ), en el caso de los gradientes radiales, estos emergen del centro de un circulo o una elipse, y se propagan hacia la periferia esta.
Exactamente como en el caso de los gradientes lineales la sintaxis cambió, y es importante entender cómo.
La sintaxis antigua va siempre con prefijos: -webkit-
( Chrome10+, Safari5.1+ )
undefined
background: -webkit-radial-gradient(posición en x e y, forma tamaño, color-stops);
background: -webkit-radial-gradient(60px 70px, circle farthest-side, #F06, #000);
La nueva sintaxis va sin prefijos.
undefined
background: radial-gradient(tamaño forma at posición en x e y, color-stops);
background: radial-gradient(farthest-side circle at 60px 70px, #F06, #000);
.r{
background: -webkit-radial-gradient( 60px 70px, circle farthest-side, #F06, #000 );
background: radial-gradient( farthest-side circle at 60px 70px, #F06, #000 );
}
La posición ( opcional )
background: -webkit-radial-gradient(60px 70px, circle farthest-side, #F06, #000); background: radial-gradient(farthest-side circle at 60px 70px, #F06, #000);
El parámetro destacado en rojo arriba, determina la posición del centro del degradado, situado, en este caso, a x = 60px
e y = 70px
respecto a la esquina izquierda arriba del elemento. Si declaramos solo el valor de la coordenada x
, CSS interpreta que y = 50%
. Si no especificamos la posición del centro, el degradado emerge del centro del elemento (x = 50%; y = 50%
)
También podemos utilizar palabras clave ( left
, right
, top
, bottom
). En este ejemplo at left bottom
sitúa el centro del degradado en la esquina izquierda ( left
) inferior ( bottom
) del elemento.
background: -webkit-radial-gradient(left bottom, circle farthest-side , #F06, #000); background: radial-gradient(circle farthest-side at left bottom, #F06, #000);
See the Pen CSS radial-gradient posición by Gabi (@enxaneta) on CodePen.
La forma ( opcional )
El segundo parámetro ( también opcional ) puede ser circle
( circulo ) o ellipse
( elipse ), e indica la forma final que tendrá el gradiente. Si no especificamos la forma, o si la caja es un cuadrado, obtendremos un gradiente circular.
background: -webkit-radial-gradient(60px 70px, circle farthest-side, #F06, #000); background: radial-gradient(farthest-side circle at 60px 70px, #F06, #000);
background: -webkit-radial-gradient(60px 70px, ellipse farthest-side, #F06, #000); background: radial-gradient(farthest-side ellipse at 60px 70px, #F06, #000);
See the Pen CSS radial-gradient circle-ellipse by Gabi (@enxaneta) on CodePen.
El tamaño ( opcional )
background: -webkit-radial-gradient(60px 70px, circle farthest-side, #F06, #000); background: radial-gradient(farthest-side circle at 60px 70px, #F06, #000);
El parámetro destacado en rojo determina el tamaño del gradiente, o sea: hasta donde se extiende. Podemos utilizar una las siguientes palabras clave ( keywords ):
closest-side ( el lado más cercano ): el gradiente se extiende hasta tocar el lado más cercano.
farthest-side ( el lado más alejado ): el gradiente se extiende hasta tocar el lado más alejado.
closest-corner ( la esquina más cercana ): el gradiente se extiende hasta tocar la esquina más cercana.
farthest-corner ( la esquina más lejana ): el gradiente se extiende hasta tocar la esquina más lejana.
Si no especificamos el tamaño el gradiente se extiende por defecto hasta tocar la esquina más lejana ( farthest-corner
).
.s{
background: -webkit-radial-gradient( left bottom, circle farthest-corner, #F06, #000 );
background: radial-gradient( farthest-corner circle at left bottom, #F06, #000 );
}
Probablemente algunos piensan que no puede ser! Que la esquina mas lejana es negra-negra. Pero no es así. Si hacemos una captura de pantalla del gradiente y abrimos la imagen en Photoshop – por ejemplo - podemos observar que el color del más alejado pixel es #070003
, lo que equivale a hsl(334,100%,1%)
; Ahora cambiamos la luminosidad del color hsl de 1%
a 50%
y transformamos de nuevo a hex. El resultado: #ff006e
es casi el mismo color que utilizamos para el gradiente.
Naturalmente entre capturas de pantalla Photoshop y transformaciones perdimos algunos puntos. Sin embargo esto demuestra que el color fucsia sigue allí, aunque muy oscurecido ( luminosidad 1% ).
Lea más acerca de los colores hsl y hsla
También podemos indicar explícitamente el tamaño del gradiente ( aunque esto parece no funcionar en -webkit-
).
Si la forma es un circulo ( circle
) podemos indicar el radio de este.
background: -webkit-radial-gradient(60px 70px, circle 150px, #F06, #000);background: radial-gradient(150px circle at 60px 70px, #F06, #000);
Si la forma es una elipse ( ellipse
) podemos indicar los radios rx
y ry
( 75px
y respectivamente 50px
en este caso ).
background: -webkit-radial-gradient(60px 70px, ellipse 75px 100px, #F06, #000);background: radial-gradient(75px 100px ellipse at 60px 70px, #F06, #000);
.t{
background: radial-gradient(75px 100px ellipse at 60px 70px, #F06, #000);
}
Los color-stop
Los color-stop
( similares a los color-stop de los gradientes lineales ) representan puntos a lo largo del radio del gradiente ( gradient ray ), donde el color cambia. Habrá que tener en cuenta que el punto correspondiente a 0%
está ubicado en el centro de la elipse. Exactamente como en el caso de los gradientes lineales, si no especificamos el porcentaje, el CSS considera que el primer color-stop
empieza al 0%
y el último color-stop
acaba al 100%
.
background: -webkit-radial-gradient(circle farthest-side, #F06 0%, #000 100%); background: radial-gradient( farthest-side circle #F06 0%, #000 100%);