Referéncia CSS : Degradados
Categorías : CSS, HTML, Programación.

Ahora en CSS3 se pueden utilizar degradados como si fueran una imagen de fondo. Con esta mejora tenemos la oportunidad de innovar mucho en los diseños de nuestras páginas, ya que podemos calcular estos degradados tanto en porcentajes como en pixeles, y esto nos da mucha flexibilidad para adaptar nuestras páginas a distintos dispositivos sin tener que rompernos la cabeza creando varias imágenes para ello.
Además disponemos de degradados lineales o radiales, en los que podemos usar 2 o más colores, y que pueden tener patrones repetitivos.
Lo único malo de estos degradados es que varios navegadores antiguos (y no tan antiguos como Internet Explorer 9) no los soportan, pero con el tiempo estoy seguro de que serán una herramienta básica para la mayoría de webs.
Degradado lineal
La sintaxis para este tipo de degradados puede parecer un poco complicada al principio, pero ya veréis que es bastante simple, y si faltan algunos datos el mismo navegador los auto-calcula.
Sintaxis
background: linear-gradient(PosicionInicio, Color PuntoParada, Color2 PuntoParada2, Etc...)
PosicionInicio | Especifica desde donde empezara el degradado. Puede ser : 'top ', 'left ', 'right ', 'bottom ', o un ángulo por ejemplo '55deg '. Este parámetro es opcional, si no se especifica el degradado empieza desde arriba. |
Color | Color que se usara en esta posición. Para más información sobre los colores en CSS visita este enlace Referéncia CSS : Colores. |
PuntoParada | Posición donde terminara el color, puede ser definida mediante porcentajes o mediante pixeles. Este parámetro es opcional, si no se especifica se calculara repartiendo el mismo porcentaje para los demás colores. |
Color2 | Color que se usara en esta posición. Para más información sobre los colores en CSS visita este enlace Referéncia CSS : Colores. |
PuntoParada2 | Posición donde terminara el color2, puede ser definida mediante porcentajes o mediante pixeles. Este parámetro es opcional, si no se especifica se calculara repartiendo el mismo porcentaje para los demás colores. |
Etc... | Podemos especificar mas colores y puntos de parada si es necesario. Obviamente estos parámetros son opcionales. |
Veamos un ejemplo simple :
/* Ejemplo simple */.EjemploLinearSimple { background:linear-gradient(rgb(255, 0, 0), rgb(100, 0, 0)); }
En este ejemplo como no se ha indicado la posición inicial el degradado empieza por arriba, y como no se han especificado puntos de parada se reparten cada uno un 50% del espacio, es decir el primero termina al 50% y el segundo al 100%.
Compliquemos un poco el ejemplo :
/* Ejemplo con 3 colores */.EjemploLinear3C { background:linear-gradient(45deg, rgb(255, 255, 0) 20%, rgb(200, 0, 0) 60%, rgb(0, 150, 0)); }
En esta ocasión el primer parámetro define el punto de inicio en grados, (0 grados indica la izquierda) 45 grados indica abajo a la izquierda. Luego se han especificado 3 colores : amarillo hasta llegar al 20%, luego rojo hasta llegar al 60% y por último el verde.
Compatibilidad
Esta propiedad es soportada por :
Versiones 4.0 hasta 25 utilizando el prefijo -webkit- . |
|
Versiones 3.6 hasta la 15.0 utilizando el prefijo -moz- , a partir de la 16 funciona sin prefijo. |
|
Versiones 11.1 hasta la 12 utilizando el prefijo -o- , a partir de la 12.1 funciona sin prefijo. |
|
Versiones 4.0 hasta la 6.0 utilizando el prefijo -webkit- . |
|
A partir de la versión 10 sin necesidad de prefijo. |
Ejemplo
Degradado lineal repetitivo
En esencia estos degradados funcionan de forma muy similar a los degradados lineares con la diferencia de que este degradado se repite hasta el infinito en todas las direcciones.
Sintaxis
background: repeating-linear-gradient(PosicionInicio, Color PuntoParada, Color2 PuntoParada2, Etc...)
Los parametros son exactamente los mismos que con el Degradado lineal.
Veamos un ejemplo :
/* Ejemplo repetitivo */.EjemploLinearRepetitivoSimple { background:repeating-linear-gradient(rgb(0, 255, 0) 0%, rgb(0, 100, 0) 10%); }
Lo único destacable es que yo le digo dos colores un verde claro desde el 0% y un verde oscuro hasta el 10%, y el navegador se encarga de repetirlos hasta completar todo el objeto.
Compatibilidad
Esta propiedad es soportada por :
Versiones 4.0 hasta 25 utilizando el prefijo -webkit- . |
|
Versiones 3.6 hasta la 15.0 utilizando el prefijo -moz- , a partir de la 16 funciona sin prefijo. |
|
Versiones 11.1 hasta la 12 utilizando el prefijo -o- , a partir de la 12.1 funciona sin prefijo. |
|
Versiones 4.0 hasta la 6.0 utilizando el prefijo -webkit- . |
|
A partir de la versión 10 sin necesidad de prefijo. |
Ejemplo
Degradado radial
Los degradados radiales si ya los conocéis de editores de imágenes a primera vista pueden parecer bastante simples, pero para los navegadores los han complicado bastante más, de tal forma que son mucho más personalizables.
Sintaxis
background: radial-gradient(PosicionInicio, Figura Tamaño, Color PuntoParada, Color2 PuntoParada2, Etc...)
PosicionInicio | Especifica desde donde empezara el degradado. Puede ser :
center '.También se puede definir la posición inicial mediante porcentajes o pixeles (si solo especificas un valor, por defecto el ultimo valor será 50%). Este parámetro es opcional, si no se especifica el degradado empieza desde el centro. |
||||||||
Figura | Figura que se usara para el degradado, puede ser 'circular ' o 'ellipse '. Este parámetro es opcional y por defecto será 'ellipse '. |
||||||||
Tamaño | Tamaño del degradado que puede ser definido mediante valores en pixeles, porcentajes, o mediante una de las siguientes palabras clave :
![]()
La parte azul de la imagen representa la caja donde pintamos el degradado, y los círculos de puntos rojos son posibles partes del degradado que están tanto dentro como fuera de la caja.
|
||||||||
Color | Color que se usara en esta posición. Para más información sobre los colores en CSS visita este enlace Referéncia CSS : Colores. |
||||||||
PuntoParada | Posición donde terminara el color, puede ser definida mediante porcentajes o mediante pixeles. Este parámetro es opcional, si no se especifica se calculara repartiendo el mismo porcentaje para los demás colores. |
||||||||
Color2 | Color que se usara en esta posición. Para más información sobre los colores en CSS visita este enlace Referéncia CSS : Colores. |
||||||||
PuntoParada2 | Posición donde terminara el color2, puede ser definida mediante porcentajes o mediante pixeles. Este parámetro es opcional, si no se especifica se calculara repartiendo el mismo porcentaje para los demás colores. |
||||||||
Etc... | Podemos especificar mas colores y puntos de parada si es necesario. Obviamente estos parámetros son opcionales. |
Veamos un ejemplo simple :
/* Ejemplo radial simple */.EjemploRadialSimple { background:radial-gradient(rgb(0, 0, 200), rgba(255, 255, 255, 0.08)); }
En este ejemplo utilizamos dos colores, y automáticamente se asigna la figura elipse (aunque al ser un rectángulo perfecto se vea circular), y los puntos de parada se definen automáticamente al 50%. También fijaros que en esta ocasión he utilizado rgba
para dar una transparencia al degradado.
Ahora compliquemos un poco la cosa con el siguiente ejemplo :
/* Ejemplo radial */.EjemploRadial2 { background:radial-gradient(10px 20px, farthest-side, #FFFFFF 15%, green); }
En este caso se ha definido una posición inicial distinta para el centro del degradado (10 pixeles desde la izquierda, y 20 pixeles desde arriba), el tamaño del degradado está limitado por farthest-side
lo que hace que el ultimo color quede prácticamente plano. Hay 3 colores, blanco, verde, y un verde oscuro, fijaros que el verde oscuro llega un punto que tiene la misma tonalidad, esto es porque al llegar al tamaño máximo del elipse definido por farthest-side
ya no se aplican más degradados y se queda el color plano.
Compatibilidad
Esta propiedad es soportada por :
Versiones 4.0 hasta 25 utilizando el prefijo -webkit- . |
|
Versiones 3.6 hasta la 15.0 utilizando el prefijo -moz- , a partir de la 16 funciona sin prefijo. |
|
Versiones 11.6 hasta la 12 utilizando el prefijo -o- , a partir de la 12.1 funciona sin prefijo. |
|
Versiones 4.0 hasta la 6.0 utilizando el prefijo -webkit- . |
|
A partir de la versión 10 sin necesidad de prefijo. |
Ejemplo
Degradado radial repetitivo
En esencia estos degradados funcionan de forma muy similar a los degradados radiales con la diferencia de que este degradado se repite hasta el infinito en todas las direcciones.
Sintaxis
background: repeating-radial-gradient(PosicionInicio, Figura Tamaño, Color PuntoParada, Color2 PuntoParada2, Etc...)
Los parametros son exactamente los mismos que con el Degradado radial.
Veamos un ejemplo simple :
/* Ejemplo radial repetitivo simple */.EjemploRadialRepetitivoSimple { background:-webkit-repeating-radial-gradient(rgb(0, 0, 255) 0%, rgb(0, 0, 100) 20%); }
En este ejemplo básicamente hacemos un degradado con un azul claro en el 0% y un azul oscuro al 20%, que luego se repite hasta llenar la caja.
Veamos otro ejemplo :
/* Ejemplo radial repetitivo */.EjemploRadialRepetitivo2 { background:repeating-radial-gradient(70% 70%, yellow 0%, yellow 15%, red 15%, red 30%); }
En este último ejemplo aunque deje de ser un degradado estrictamente hablando, es un efecto fácil de hacer para crear una diana por ejemplo. El truco de porque no hace el degradado entre el rojo y el amarillo está en que he añadido 2 veces cada color y no hay ninguna separación entre ellos, fijaros que el amarillo va del 0% al 15%, y luego el rojo va del 15% al 30%.
Versiones 4.0 hasta 25 utilizando el prefijo -webkit- . |
|
Versiones 3.6 hasta la 15.0 utilizando el prefijo -moz- , a partir de la 16 funciona sin prefijo. |
|
Versiones 11.6 hasta la 12 utilizando el prefijo -o- , a partir de la 12.1 funciona sin prefijo. |
|
Versiones 4.0 hasta la 6.0 utilizando el prefijo -webkit- . |
|
A partir de la versión 10 sin necesidad de prefijo. |