w3.unpo<code>todo

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+ )

background: -webkit-radial-gradient(60px 70px, circle farthest-side, #F06, #000);

La nueva sintaxis va sin prefijos.

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%);