Menú Cerrar

Degradados con CSS3 y II

Con este post termino la mini serie de dos posts dedicados a los degradados con CSS3. Ahora le toca a los degradados radiales y como podrás ver son casi tan sencillos de utilizar como los lineales.

La sintaxis básica (sin prefijos de navegadores y olvidando el -webkit-gradient para versiones antiguas de Safari) en su última versión sería:

background: radial-gradient(tamaño y/o forma at posición del centro (x e y), color1 (el centro) distancia1, color2 distancia2, color3 distancia3, ... colorX distanciaX);

El formato de los colores es el mismo que en el caso lineal, se pueden establecer todos los colores que se quieran. Los colores irán desde el centro hacía fuera siendo el primer color el central. El caso más sencillo sería:

1

Las formas posibles son circulo y elipse (circle y ellipse) siendo ellipse la forma por defecto. Aunque la forma por defecto sea la elipse se puede jugar con el tamaño de la capa y si es un cuadrado perfecto la elipse quedará como un circulo. Si se establece como circle y la forma de la capa no es cuadrada el navegador intentará crear un circulo perfecto aunque se salga, sin mostrar lo que quede fuera:

1

En el caso del tamaño se puede indicar en cualquier medida típica de CSS o utilizando:

  • closest-side: el degradado se extenderá hacía el lado más cercano.
  • farthest-side: el degradado se extenderá hacía el el lado más alejado.
  • closest-corner: el degradado se extenderá hacía ella esquina más cercana.
  • farthest-corner: el degradado se extenderá hacía ella esquina más lejana.

1

Para utilizar transparencias habrá que utilizar para los colores la mascara rgba(r,g,b,a) donde los colores tendrá un rango entre 0 y 255, y el canal alfa de 0 a 1:

1

Estableciendo más colores y jugando con las distancias se pueden conseguir degradados muy espectaculares, aquí dejo mi intento de crear algo parecido a un ojo:

1

Queda por mostrar repeating-radial-gradient, su sintaxis es exactamente la misma que radial-gradient:

background: repeating-radial-gradient(tamaño y/o forma at posición del centro (x e y), color1 (el centro) distancia1, color2 distancia2, color3 distancia3, ... colorX distanciaX);

Con lo que se pueden conseguir también degradados espectaculares según lo que se busque:

1

Los degradados dan para mucho, se pueden crear detalles o fondos completos sin tener que recurrir a crear una imagen, con lo que la carga de la página siempre será más rápida. Pero tampoco hay que exagerar, es otra opción más para utilizarla cuando quede mejor que otra cosa. Todo depende de la imaginación y de las necesidades.