NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Referéncia CSS : Degradados

11 de Marzo del 2013 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : CSS, HTML, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Referéncia CSS : Degradados

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 :

Degradado lineal simple
1
2
/* 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 :

Degradado lineal
1
2
/* 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 :

Degradado lineal repetitivo
1
2
/* 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 :
  • left   top    Esquina superior izquierda.
  • left   center Centrado verticalemten, hacia la izquierda.
  • left   bottom Esquina inferior izquierda.
  • center top    Centrado horizontalmente, hacia arriba.
  • center center Centrado.
  • center bottom Centrado horizontalmente, hacia abajo.
  • right  top    Esquina superior derecha.
  • right  center Centrado verticalmente, hacia la derecha.
  • right  bottom Esquina inferior derecha.
Si omites una de las palabras se presupondrá como '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 representa la caja donde pintamos el degradado, y los circulos de puntos rojos son partes del degradado que estan tanto dentro como fuera de la caja.
1 closest-side El degradado está dimensionado de manera que su forma exterior se encuentra con el lado de la caja que está más cerca de su centro.
2 farthest-side El degradado está dimensionado de manera que su forma exterior se encuentra con el lado de la caja que está más alejada de su centro.
3 closest-corner El degradado está dimensionado de manera que su forma exterior se con la esquina de la caja que está más cerca de su centro.
4 farthest-corner El degradado está dimensionado de manera que su forma exterior pasa por la esquina del cuadro que se encuentra más alejado de su centro (valor por defecto).
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 :

Degradado radial simple
1
2
/* 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 :

Degradado radial
1
2
/* 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 :

Degradado radial repetitivo simple
1
2
/* 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 :

Degradado radial repetitivo
1
2
/* 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.

Ejemplo


He de decir que toda esta documentación está sujeta a cambios ya que aun no está del todo claro como acabaran los degradados en CSS3, y aun están implementando nueva sintaxis, por lo que puede haber más de un cambio en el futuro. De todas formas pienso que como mucho añadirán mas funciones y dejaran todo lo hecho así para conservar compatibilidad.