JMiur [E]

Así como hay gradientes lineales, también las hay de tipo radial donde el degradado se genera de modo circular.

Si nos limitamos a lo simple, la sintaxis de ambas no difiere demasiado, por ejemplo:
.gradiente-lineal {
  background: -moz-linear-gradient(#FFF, #000);
  background: -webkit-linear-gradient(#FFF, #000);
  background: -o-linear-gradient(#FFF, #000);
  background: -ms-linear-gradient(#FFF, #000);
}

.gradiente-radial {
  background: -moz-radial-gradient(#FFF, #000);
  background: -webkit-radial-gradient(#FFF, #000);
  background: -o-radial-gradient(#FFF, #000);
  background: -ms-radial-gradient(#FFF, #000);
}


Aunque en todos los casos debemos usar el prefijo necesario para que los distintos navegadores reconozcan la propiedad, en un esquema elemental, basta cambiar linear-gradient por radial-gradient indicando los colores inicial (comenzará el el centro ) y final.

Si queremos personalizarlas aún más, la sintaxis tampoco varía:
radial-gradient( posición, color-inicial, color-final )
donde la posición indica dónde comenzará la gradiente (top, right, bottom, left, center):
radial-gradient(center top, #FFF, #000); o radial-gradient(top, #FFF, #000);
radial-gradient(center bottom, #FFF, #000); o radial-gradient(bottom, #FFF, #000);
radial-gradient(left center, #FFF, #000); o radial-gradient(left , #FFF, #000);
radial-gradient(right center, #FFF, #000); o radial-gradient(right, #FFF, #000);


Claro que esto se complica un poco más ya que este tipo de gradientes posee otro parámetro opcional que podemos utilizar y que consta de dos palabras:
radial-gradient( posicion, shape size, color-inicial, color-final )
shape es "la forma" que adoptará y puede ser circle o ellipse
size indica la forma en que se expandirá y terminará y puede ser closest-side (o contain), closest-corner, farthest-side, farthest-corner (o cover)
radial-gradient(circle closest-side, #FFF, #000)
y todo puede combinarse:
radial-gradient(left top,circle closest-side, #FFF, #000)


Al igual que la lineales, si queremos usar varios colores, los vamos agregando uno tras otro, separados por comas:
radial-gradient(#FFF, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #0F0, #000)

3 comentarios:

Unknown  

Maravilloso como lo de ayer :D

Responder
María Pilar  

Hola Jmiur! Estoy haciendo un master sobre gradientes con su blog y cuando pensaba que ya lo tenía más o menos, me llega esta entrada que riza el rizo: gradientes radiales. Siempre va más allá de lo que yo no solo no sé hacer sino que ni por casualidad se me ocurre imaginar. Cum laude!!

Responder
JMiur  

Todo sirve para jugar un poco :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR