Usar gradientes

Gecko 1.9.2, usado por Firefox 3.6, incluye soporte para gradientes en el CSS background. El uso de gradientes CSS en un fondo le permite mostrar una suave transición entre dos o más colores especificados, lo que le permite evitar el uso de imágenes para estos efectos, reduciendo así el tiempo de descarga y el uso de ancho de banda. Además, debido a que el gradiente es generado por el navegador, los objetos con degradados se ven mejor cuando son acercados, y se puede adaptar el diseño mucho más flexible.

Gecko soporta dos tipos de gradientes: lineal (-moz-linear-gradient) y radial (-moz-radial-gradient).

Gradiente lineal

para crear una gradiente lineal, se establece un punto de partida y una dirección (indicado en un ángulo) a lo largo de la cual se aplica el efecto de degradado. También se definen paradas de color. Color stops son los colores que usted desee que Gecko renderize entre suaves transiciones, y se deben especificar al menos dos de ellos, pero puede especificar más para crear efectos de degradación más complejos.

Gradiente lineal simple

Aquí hay una gradiente lineal que comienza en el centro (horizontalmente) y top (vertical) e inicia con azul, degradando a blanco.

Captura de pantalla Demostración en vivo
 
background: -moz-linear-gradient(top, blue,white);

Cambiar la misma gradiente para ser generada de izquierda a derecha:

Captura de pantalla Demostración en vivo
basic_linear_blueleft.png
 
background: -moz-linear-gradient(left, blue, white);

Se pueden generar gradientes diagonalmente especificando las posiciones de inicio horizontal y vertical. Por ejemplo:

Captura de pantalla Demostración en vivo
basic_linear_bluetopleft.png
 
background: -moz-linear-gradient(left top, blue, white);

Usar angulos

Si no se especifica un angulo, uno es determinado automáticamente basado en la posición de inicio. Si desea más control sobre la dirección de la degradación, se puede crear el angulo especifico.

Por ejemplo, aquí tiene dos gradientes que tienen el mismo punto de inicio de "centrado izquierdo", pero el segundo tiene también un angulo de 20 grados.

linear_gradient_angle.png

El cuadro a la derecha utiliza CSS así:

background: -moz-linear-gradient(left 20deg, black, white);

El angulo especificado como un angulo entre una linea horizontal y una linea de degradación, se genera en el sentido de las agujas del reloj. En otras palabras, 0 grados genera un degradado horizontal de izquierda a derecha, mientras que 90 grados crea una gradiente vertical de abajo hacia arriba:

linear_redangles.png

background: -moz-linear-gradient(<angle>, red, white);

Paradas de color

Paradas de color son puntos entre la linea de degradación que tendrá un color especifico en esa ubicación. La ubicación puede ser especificada como un porcentaje de la longitud de la linea, or como una longitud absoluta. Pueden especificar tantas paradas de color como desee con el fin de conseguir el efecto deseado.

Si se especifica la ubicación en porcentaje, 0% representa el punto de inicio, mientras que 100% representa el punto final; sin embargo, puede usar valores fuera de este rango si es necesario para obtener el efecto deseado.

Ejemplo: Tres paradas de color

Este ejemplo especifica tres paradas de color:

Capturas de pantalla Demostración en vivo
linear_colorstops1.png
 
background: -moz-linear-gradient(top, blue, white 80%, orange);

Note que la primera y la ultima parada de color no especifican una ubicación; es por eso que, los valores de 0% y 100% son asignados automáticamente. La parada de color del medio especifica una ubicación de 80%, colocandose más lejos en el camino hacia la parte inferior.

Ejemplo: Paradas de color igualmente  espaciadas

Aquí tiene un ejemplo usando una amplia variedad de colores, todos igualmente espaciados:

Captura de pantalla Demostración en vivo
linear_rainbow.png
 
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

Note que las paradas de color son igualmente espaciadas cuando la ubicación no es especificada.

Transparencia y gradientes

Las gradientes soportan transparencia. Puede usar esto, por ejemplo, al apilar varios fondos, para crear efectos de desvanecimiento de las imágenes de fondo. Por ejemplo:

linear_multibg_transparent.png

background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

Los fondos se apilan con el primer fondo especificado encima, y cada fondo sucesivo más lejos. Al apilar fondos de esta forma, puede crear efectos muy creativos como se ve arriba.

Gradientes radiales

Las gradientes radiales se especifican usando la propiedad -moz-radial-gradient. La sintaxis es similar a la de gradientes lineales, excepto que se puede especificar la figura de la degradación (debe ser un circulo o una elipse) al igual que su tamaño.

Paradas de color

Puede especificar paradas de color de la misma manera que para las gradientes lineales. La linea de gradiente se extiende desde el punto inicial hacia todas las direcciones.

Ejemplo: Paradas de color igualmente espaciadas

De forma predeterminada, al igual que con gradientes lineales, las paradas de color son igualmente espaciadas:

Captura de pantalla Demostración en vivo
radial_gradient_even.png
 
background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));

Ejemplo: Paradas de color explícitamente espaciadas

Aquí especificamos una ubicación determinada para las paradas de color:

Captura de pantalla Demostración en vivo
radial_gradient_varied.png
 
background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

Tamaño

Esta es una de las áreas en la cual difieren las gradientes radiales de las gradientes lineales. Se puede proporcionar un valor de tamaño que especifique el punto que define el tamaño del circulo o la elipse. Ver esta descripción de las constantes de el tamaño para más detalles.

Ejemplo: closest-side para elipses

Esta elipse usa el valor de tamaño closest-side, lo que significa que el tamaño está establecido por la distancia desde el punto de inicio (el centro) hacia el lado más cercano de la caja contenedora.

Captura de pantalla Demostración en vivo
radial_ellipse_size1.png
 
background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

Ejemplo: farthest-corner para elipses

Este ejemplo es similar a el previo, excepto que su tamaño es especificado por farthest-corner, que establece el tamaño de la gradiente por la distancia desde el punto de inicio hacia la esquina más alejada de la caja contenedora.

Captura de pantalla Demostración en vivo
radial_ellipse_size2.png
 
background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

Ejemplo: closest-side para circulos

Este ejemplo usa closest-side, que determina el tamaño del circulo como la distancia entre el punto de inicio (el centro) y el lado más cerrado.

Captura de pantalla Demostración en vivo
radial_circle_size1.png
 
background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

Aquí, el radio del circulo es la mitad de la altura de la caja, ya que los bordes superior e inferior son equidistantes desde el punto de inicio y están más cerca de los bordes izquierdo y derecho.

Repetir gradientes

Las propiedades -moz-linear-gradient y -moz-radial-gradient no soportan repeticiones automáticas de paradas de color. Sin embargo, las propiedades -moz-repeating-linear-gradient y -moz-repeating-radial-gradient están disponibles para ofrecer esta funcionalidad.

Ejemplo: Repetir gradiente

Este ejemplo utiliza -moz-repeating-linear-gradient para crear una gradiente:

Captura de pantalla Demostración en vivo
repeating_linear_gradient.png
 
background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);

Ejemplo: Repetir gradiente radial

Este ejemplo utiliza -moz-repeating-radial-gradient para crear una gradiente:

Screen Shot Live Demonstration
repeating_radial_gradient.png
 
background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

Vea también

Archivos adjuntos

Archivo Tamaño Fecha Adjunto por
basic_linear_bluetop.png
4444 bytes 2009-12-03 22:22:38 Sheppy
basic_linear_blueleft.png
7400 bytes 2009-12-03 22:27:38 Sheppy
basic_linear_bluetopleft.png
9862 bytes 2009-12-03 22:30:29 Sheppy
linear_gradient_angle.png
13105 bytes 2009-12-04 18:13:40 Sheppy
linear_redangles.png
25331 bytes 2009-12-04 18:16:48 Sheppy
linear_colorstops1.png
4169 bytes 2009-12-04 18:23:42 Sheppy
linear_rainbow.png
8334 bytes 2009-12-04 18:29:13 Sheppy
linear_multibg_transparent.png
80110 bytes 2009-12-04 18:31:22 Sheppy
radial_gradient_even.png
13566 bytes 2009-12-04 18:44:21 Sheppy
radial_gradient_varied.png
9183 bytes 2009-12-04 18:44:26 Sheppy
radial_ellipse_size1.png
27952 bytes 2009-12-04 20:27:36 Sheppy
radial_ellipse_size2.png
31932 bytes 2009-12-04 20:27:38 Sheppy
radial_circle_size1.png
17633 bytes 2009-12-04 22:44:05 Sheppy
repeating_linear_gradient.png
3404 bytes 2009-12-04 22:59:08 Sheppy
repeating_radial_gradient.png
3789 bytes 2009-12-04 22:59:10 Sheppy
pattern3_3
pattern3_3
4605 bytes 2012-08-28 16:14:17 caroline
pattern3_4
pattern3_4
10117 bytes 2012-08-28 16:14:23 caroline
Sign in with your Email (black)
Black Persona sign in button with text "Sign in with your Email"
3543 bytes 2012-08-29 13:52:22 Callahad
Sign in with your Email (blue)
Blue Persona sign in button with text "Sign in with your Email"
3856 bytes 2012-08-29 13:52:47 Callahad
Sign in with your Email (red)
Red Persona sign in button with text "Sign in with your Email"
3550 bytes 2012-08-29 13:53:12 Callahad
Sign in with Persona (black)
Black Persona sign in button with text "Sign in with Persona"
3373 bytes 2012-08-29 13:53:47 Callahad
Sign in with Persona (red)
Red Persona sign in button with text "Sign in with Persona"
3398 bytes 2012-08-29 13:54:24 Callahad

Etiquetas y colaboradores del documento

Colaboradores de esta página: inma_610, Nuc134rB0t
Última actualización por: Nuc134rB0t,