JMiur [E]

Otra de las nuevas características del CSS3 es la que nos permite crear gradientes de color para utilizar como fondos. Como todas las otras, hay diferentes instrucciones dependiendo del navegador:
La mayor parte de los ejemplos siguientes sólo se verán Firefox porque resulta complejo aplicar todas las propiedades en esta entrada.

Las utilizamos como si fueran un color dentro de la propiedad background y las explicaciones de cada parámetro son bastante complicadas aunque puede intentarse de manera instintiva y ver qué ocurre:
-moz-linear-gradient(inicio angulo, color1, color2);
-moz-radial-gradient(inicio angulo, shape, color1, color2);
inicio es la posición desde donde comenzará a ser generada; pueden ser valores expresdos en pixeles, porcentajes o palabras clave como left, top, right, bottom o center.
angulo obviamente, indica el ángulo del gradiente
shape puede ser circle o ellipse y define la forma de una gradiente

Todas son optativas así que podemos obviarlas.

colorX es la más importante e indica los distintos colores que se utilizarán y como mínimo colocaremos dos aunque puede haber más. Lo más sencillo sería usarlos de este modo:
background-image: -moz-linear-gradient(#123, #789); /* una gradiente lineal */
background-image: -moz-radial-gradient(#123, #789); /* una gradiente radial */

Ver/Ocultar Ejemplo [+]


Otro ejemplo similar, utilizando varios colores, le agregamos amarillo:
background-image: -moz-linear-gradient(#123, #789, #BB0); /* una gradiente lineal */
background-image: -moz-radial-gradient(#123, #789, #BB0); /* una gradiente radial */

Ver/Ocultar Ejemplo [+]


La cantidad de colores no parece tener limitaciones y se distribuyen de manera proporcional pero también podemos controlar eso, agregando un porcentaje o una longitud. Esta longitud indicará en que posición comenzará a utilizarse ese color. En el primer ejemplo, los cinco colores se distribuyen parejos y en el segundo, el color verde (#00FF00) comienza 100 pixeles a la izquierda:
background-image: -moz-linear-gradient(0deg, #000000, #FF0000, #00FF00, #0000FF, #FFFFFF)
background-image: -moz-linear-gradient(0deg, #000000, #FF0000, #00FF00 100px, #0000FF, #FFFFFF)

Ver/Ocultar Ejemplo [+]


Le hemos agregado un valor más, el ángulo expresado en grados, eso permite establecer la dirección del gradiente:

background-image: -moz-linear-gradient(0deg, #FF0, #0FF);
background-image: -moz-linear-gradient(90deg, #FF0, #0FF);
background-image: -moz-linear-gradient(180deg, #FF0, #0FF);
background-image: -moz-linear-gradient(270deg, #FF0, #0FF);

Ver/Ocultar Ejemplo [+]


La opción es realmente intersante aunque parece compleja, sobre todo, nos permite generar gradientes que se verán bastante bien en distintos navegadores si es que nos limitamos a usar las carcterísitcas maas elementales es decir, establecer una gradiente lineal ya sea horizontal y vertical con sólo dos colores.

Estos dos último ejemplos, deberían verse en todos los navegadores indicados al incio de la entrada:
background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"


background-image: -moz-linear-gradient(0deg,#AAAAAA, #000000);
background-image: -webkit-gradient(linear, left bottom, right top, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#AAAAAA,endColorStr=#000000);

29 comentarios:

gotalfc  

Hola, pues estoy en firefox y no veo nada, aunque por el texto se ve interesante, lastima que css3 sea tan deficiente como tener que poner codigo especial para cada navegador

Responder
Unknown  

Qué decirte? cómo voy a jugar con esto! me encantó, genial, espectacular! :D

Preguntarte algo ¿crees conveniente actualizar el IE? teniendo en cuenta que mi CPU no es guau cúanto espacio tengo!

Gracias!

Responder
Gem@  

Qué maravilla!! ya he probado y lo añadí a los estilos de una imagen con moz-box-shadow, moz-border-radius y moz-linear-gradient ha quedado una imagen mega-moz :)

Responder
Analía Alvado  

Buen día JMiur, si te sirve como dato, con Firefox no veo nada y con IE veo sólo los 2 últimos… igual probaré alguno en la semana… ando con ganas de torturarme un poco (je)

Responder
Bonzu Pipinpadaloxicopolis III  

Oye y esto se puede usar con background-size y la propiedad de usar multiples fondos?

Responder
Mun2  

No veo nada en Fire Fox 3.5.7
que raro que No me da la Visualización de Los Gradientes

Responder
noha.  

Hola, pues uso Firefox y los veo todos :D ... que raro que algunos no los vean, saludos y gracias por todos tus aportes son muy buenos!

Responder
JMiur  

gotalfc, GARABATO, Acv2Design:
Tal como dice el post, sólo en Firefox 3.6 o superior, las versiones anteriores sólo soportan algunas propeidades de CSS3 pero n otodas.

Graciela:
¿No lo habíamos actualizado a IE8? Si no es así, hazlo, no es problema.

Gem@
Pués sí, es realmente increible y da para jugar un rato largo :D

Bonzu:
La verdad, no sé; es cosa de probar y ver. Depende de los navegadores, hay algunas limitaciones, variaciones o etiquetas donde no es posible utiliazrlo.

Saludos noha; en FF se verá si está actiualizado a la versión 3.6, sino no, ese es el problema.

Responder
Mun2  

Bueno Ahora si que Instale Firefox 3.6 Si me sale

Responder
José GDF  

De momento no puedo verlo... Será hora de ir actualizándose a 3.6.

Responder
Bonzu Pipinpadaloxicopolis III  

Estoy usando background-size y la propiedad de usar multiples fondos conjuntamente y funcionan en Firefox y Google Chrome ahora me falta este ;-).

Y JMiur tengo otra duda, mi menú horizontal no se centra, ya intenté con el margin: 0 auto; el text-align:center; y nada, no anda.
Sólo se queda alineado a la izquierda. No sé si es por la propiedad position:relative; que tiene.

Responder
JMiur  

Bonzu:
No se puede centrar con amrgin auto si no se tiene un ancho establecido y si los elementos interiores LI de la lista flotan pero el contenedor UL no. Debes colcoar el margien de manera manua:
.menu {margin-left: valorpx;}

Responder
Bonzu Pipinpadaloxicopolis III  

Entonces quedé como en el principio, porque eso hacía. Bueno gracias por el tiempo prestado.

Responder
Michael Graber  

I Love You!
Muchas Gracias JMiur!

Responder
Writkas  

:X no veo nada en opera 10.63
tampoco veo letras ni el blog :S

Responder
JMiur  

Desconozco c´mo funciona Opera pero, tal como dice el post, en Opera, esta propiedad no está implementada.

Responder
San Toti  

¡Gracias! Lo empecé a usar. Queda bárbaro. Saludos.

Responder
Sr. Astato  

como podria aplicar esto al mismo texto??? Es decir, un gradiente en el texto y no en el bg.

1 saludo!
gracias!

Responder
JMiur  

Las gradientes sólo se aplican a bloques y no a textos. Hay alguna posibilidad de conseguir ese efecto usando imágenes tal como miestra Gem@ en esta entrada.

Responder
Ruben Manu Cardozo  

Cómo le hago para indicar la proporción del gradiente en este código?

background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);

Responder
JMiur  

No se si te refieres a algo así:
-moz-linear-gradient(0deg,#AAA 90%, #000)
ahí, el color claro ocupará el 90% dla ancho y así el 10%:
-moz-linear-gradient(0deg,#AAA 10%, #000)

Responder
Férbere  

En Opera sí se puede, así: background-image: -o-linear-gradient(#000,#700);

Responder
JMiur  

En Opera fue implementado a partir de la versión 11.10 que es bastante posterior a la publicación de esta entrada ya que apareció a principios del 2011.

Responder
Josue  

Hola Amigos, estoy intentando utilizar linear-gradient para realizar una degradación en ovalo o bocadillo que realice, pero solo quiero que el color que ya le coloque de fondo degrade un poco y dé un efecto de transparencia, como lo puedo hacer.?

Responder
JMiur  

Haciendo que la gradiente vaya desde ese color de fondo a otro cualquiera que definas.

Responder
pvillegasy  

Hola Jmiur, tengo una inquietud, ¿al parecer la forma de realizar gradiente con Google crome cambió?, tengo el código propuesto pero me dejó de funcionar, no se si por la versión, tuve que agregar este:
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2B93D2), color-stop(1, #77BCE6));

Otra inquietud, espero saberme explicar...en mi blog de aguaysig.com he implmentado estos codigos para realizar gradiente en las ultimas entradas y las entradas populares, en todos los exploradores funcionan muy bien, sin embargo en IE solo cuando coloco el cursor sobre el enlace se produce el gradiente. he intentado por otdas partes con display:block pero no me funciona, pues cuando coloco el cursor en otra parte del contenedor que no sea el enlace no se produce en gradiente. ¿que podria ser?

Te agradezco mucho tu ayuda

JMiur  

No, no existe tal cambio, las gradientes en Chrome, si bien pueden escribirse de ese modo, es un formato viejo y hace ya tiempo que se escriben de modo similar en todos, agregando el prefijo correspondiente; tanto las lineales como las radiales:
.
background: -moz-linear-gradient(#FFF, #000); /* FIREFOX */
background: -webkit-linear-gradient(#FFF, #000); /* CHROME/SAFARI */
background: -o-linear-gradient(#FFF, #000); /* OPERA */
background: -ms-linear-gradient(#FFF, #000); /* IE */
background: linear-gradient(#FFF, #000); /* GENERICA */

En ese blog, sólo se ven al colocar el cursor encima en todos lso naveagdores ya que la gradiente esta colocada en el hover:

.miresumen3:hover {}

y en las veriosnes viejas de IE no se ve nada ya que el filtro está comentado:

/*filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#eaf1fa,endColorStr=#073763);" EndColorStr='#FF333388');*/

pvillegasy  

Hola Jmiur, Muchas gracias por tu respuesta... lo viste desactivado porque me aburrí de que no funcionara bien. Precisamente lo coloqué en el hover para que cuando la persona colocara el cursor encima del contenedor se produjera el cambio. el problema del internet explorer es que eso solo sucede cuando el cursor está exactamente sobre el texto. Yo estoy por pensar es el problema ocurre por los bordes redondeados... muchas gracias

JMiur  

Tampoco veo problema alguno en IE por lo menos en la versión 8 (captura)

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