JMiur [E]

Crear gradientes con CSS es uno de los métodos más sencillos para generar fondos que pueden ser aplicados a casi cualquier etiqueta HTML y si bien es algo que no está implementado en las versiones viejas de Internet Explorer, llegado el caso, podemos simularlas mediante filtros o ignorar ese navegador y establecer reglas de estilo diferenciadas.

Por ahora, los navegadores que aceptan esta propiedad, requieren que se utilicen prefijos distintos para cada uno de ellos así que deberemos usarlos todos para lograr el máximo de compatibilidad:
-moz-linear-gradient( parámetros ) /* en Firefox */
-webkit-linear-gradient( parámetros ); /* en Chrome/Safari */
-o-linear-gradient( parámetros ); /* en Opera 11 o superior */
-ms-linear-gradient( parámetros ); /* en Internet Explorer 10 */
Lo básico es entender que una gradiente no es otra cosa que un degradado de colores que se aplica a un fondo así que, lo más simple es crear una de dos colores y eso lo indicamos colocando como parámetros, esos dos colores, en formato hexadecimal, rgb(), rgba() o hsl():
.ejemplo {
  background: -moz-linear-gradient(#FFF, #000);
  background: -ms-linear-gradient(#FFF, #000);
  background: -o-linear-gradient(#FFF, #000);
  background: -webkit-linear-gradient(#FFF, #000);
}
Así, sin más datos, creamos una gradiente que va del blanco al negro y que llenará el espacio al que lo aplicamos, de modo proporcional:



Tal como está, el degradado será vertical pero la dirección es algo que podemos definir: en general, sería así:
linear-gradient( posicion, color-inicial, color-final )
La posición, indica dónde comenzará la gradiente y requiere de dos palabras o valores al igual que la propiedad background-position (top, right, bottom, left, center); si sólo ponemos una, se asume que la otra es center así que:
linear-gradient(center top, #FFF, #000); o linear-gradient(top, #FFF, #000);
linear-gradient(center bottom, #FFF, #000); o linear-gradient(bottom, #FFF, #000);
linear-gradient(left center, #FFF, #000); o linear-gradient(left , #FFF, #000);
linear-gradient(right center, #FFF, #000); o linear-gradient(right, #FFF, #000);
si queremos que los colores inviertan su orden reemplazamos top por bottom; si queremos que sea horizontal (de izquierda a derecha) usamos left y si usamos right:



Admite otros valores que no sean palabras, también pueden usarse pixeles, porcentajes o ángulos, tanto positivos como negativos y combinarse de cualquier forma pero esto, en Chrome/Safari, se complica bastante ya que, como siempre, los navegadores hacen lo que se les da la gana (más información) así que esto n oserá válido en Chrome:


linear-gradient(10px 90%, #FFF, #000);
linear-gradient(20px -45deg, #FFF, #000);
aunque podemos usar ángulos en cualquiera de ellos:
linear-gradient(45deg, #FFF, #000);
Bastaría seguir agregando colores separados por comas para que la gradiente se hiciera cada vez más complicada:
linear-gradient(#FFF, #FF0, #000)
linear-gradient(#FFF, #F00, #FF0, #000)
linear-gradient(#FFF, #F00, #FF0, #0F0, #000)


Los colores se muestran ordenados y se distribuyen proporcionalmente pero, basta agregarles un valor separado por un espacio para indicar la posición de cada uno de ellos:
linear-gradient(#FFF, #FF0 20%, #000)
Hasta acá, la gradiente la aplicamos a la propiedad background pero podríamos colocarla en al propiedad background-image y, de ese modo agregar colores de fondo, algo que tiene sentido si se utilizan golores en forma rgba() que nos dan al posibilidad de crear fondos con determinada opacidad:
background-color; red;
background-image: -XXX-linear-gradient(#000, rgba(200,150,200,.5), #000);

11 comentarios:

Johnny Uve  

Muy bueno, yo ya lo habia utilizado con moz-linear-gradient para Firefox. Es una pena que en otras versiones de Internet Explorer ni se vea. Tambien me parece ilogico que cada navegador utilicice prefijos distintos y que no utilizen codigos standar como en otros casos. Saludos**

Responder
Adrián J. Messina  

Y pensar que ingenuamente cuando comencé a armar mi casa bloguera, utilicé imágenes de fondo para mostrar estos gradientes. ¡Lo que tardaba en cargar! Voy a hacer una prueba únicamente para volver un poquito al pasado =P.

Responder
Karla Castañeda  

Antes me preocupaba mucho por IE6, sobre todo en el caso de las transparencias, después pensé: si a Microsoft no le interesó y nunca cambió eso, entonces por que yo tengo que preocuparme por ello, y mucho menos, a estas alturas de la vida en donde ya existe IE9.

Ahora prefiero no complicarme mucho la existencia e ignorar esos detalles, o bien crear reglas de estilo específicas para ese viejo navegador, siempre y cuando no sean muchas lineas, de otro modo prefiero ignorarlo.

¿y tú qué prefieres? :)

Cambiando de tema ¿estás en Google+?

Responder
JMiur  

Johnny:
Es molesto pero, por ahora, inevitable.

Adrián J. Messina:
Todos hicimos lo mismo; vale la pena probarlo y en todo caso, usar CSS condicional para IE ya que los filtros no siempre dan el mismo resultado :-):

Karla:
¿IE6? Oh hace raro que dejé de preocuparme por ese navegador. Mi límite es el 8 porque para el 9 ya tendría que cambiar el sistema operativo (grave error de Microsoft). Incluso ya hay una beta del IE10 que me comentan como muy interesante así que si tienes la posibilidad de probarlo, hazlo.

Yo prefiero no tener que hacer reglas de estilo especiales y primero que nada, tratar de buscar alternativas pero, si son inevitables, no tengo ningún problema en usarlas y me parece que una forma prolija de ordenar el código.

No, no estoy en Google+ ... trato de mantenerme lejos :-)

Responder
Unknown  

Un encanto Jmiur! he estado buscando el IE9, menos mal que en el comentario lo decís para no mandarme una de esas :D

Responder
JMiur  

En XP no puede instalarse, Graciela; es una pena. Estamos en la prehistoria :-D

Responder
Unknown  

Por ahora y un largo tiempo sigo con XP, veremos cuando en el bolsillo sobre ;D

Responder
Unknown  

:D

Responder
JMiur  

Bienvenida al club :D

Responder
Neonius  

Muy buena la entrada JMiur :D No tenía idea que se podían agregar más colores a un gradient. Excelente.

P.S.: Me gustaron las grandientes del final :)

Saludos.

Responder
pvillegasy  

muy buen artículo, imagínate que había implementado un código publicado en uno de tus artículos(copy-page) en mi blog y con este logro entender lo delos gradientes...

Muchos saludos

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