css3 - horizontal - linear gradient

Gradiente lineal cruzado CSS3

Question

¿Cuáles serán las alternativas de Opera e IE del siguiente código?

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Tenga en cuenta que he probado las siguientes reglas. Todos los navegadores los admiten. Pero son gradientes verticales. ¿Alguien puede ayudarme a modificarlos a los horizontales?

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF);
background-image: -moz-linear-gradient(top, #0C93C0, #FFF);
background-image: -ms-linear-gradient(top, #0C93C0, #FFF);
background-image: -o-linear-gradient(top, #0C93C0, #FFF);
background-image: linear-gradient(top, #0C93C0, #FFF);

Answer 1

¡Tengo la solución para casi todo!

/* Safari 4+, Chrome 1-9 */ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FFFFFF));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */ background-image: -webkit-linear-gradient(top, #000000, #FFFFFF);
/* Firefox 3.6+ */ background-image: -moz-linear-gradient(top, #000000, #FFFFFF);
/* IE 7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=''#000000'', endColorStr=''#FFFFFF'', GradientType=0);
/* IE 8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr=''#000000'', endColorStr=''#FFFFFF'', GradientType=0)";
/* IE 10+ */ background-image: -ms-linear-gradient(top, #000000, #FFFFFF);
/* Opera 11.10+ */ background-image: -o-linear-gradient(top, #000000, #FFFFFF);
/* fallback image background-image: url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */ background-color: #000000;

Espero que esto pueda ayudar a algunas personas :).

Answer 2

¿Has probado this ?

Answer 3

Aquí un ejemplo, que funciona con Opera, Internet Explorer y muchos otros navegadores web. Si un navegador no admite degradados, mostrará un color de fondo normal.

background: #f2f5f6;
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc));
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#f2f5f6'', endColorstr=''#c8d7dc'',GradientType=0 );
background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);

Lo he robado de this sitio web. Microsoft ha construido su propio generador ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/… .

Answer 4

La respuesta de Rob W es exhaustiva, al mismo tiempo prolija. Por lo tanto, me gustaría obtener un resumen que respalde los navegadores actuales a fines de 2014, al mismo tiempo que garantice compatibilidad retroactiva al mismo tiempo, dejando fuera solo la capacidad inválida de IE6 / 7 de renderizar un gradiente lineal y un Webkit temprano (Chrome1-9, Saf4 -5 forma especial ( -webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) ); )

La sintaxis de los estándares ha cambiado desde la posición inicial del degradado to direction , por ejemplo, background-image: linear-gradient( to bottom, #0C93C0, #FFF );

CSS ampliamente soportado y fácil de leer:

background-color: #8BCCE1; /* fallback color (eg. the gradient center color), if gradients not supported; you could also work with an gradient image, but mind the extra HTTP-Request for older browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#0C93C0, EndColorStr=#FFFFFF )"; /* IE8-9, ColorZilla Ultimate CSS Gradient Generator uses SVG bg image for IE9 */
background-image: -webkit-linear-gradient( top, #0C93C0, #FFF ); /* Chrome10-25, Saf5.1-Saf6, iOS -6.1, Android -4.3 */
background-image: -moz-linear-gradient( top, #0C93C0, #FFF ); /* Fx3.6-15 */
background-image: -o-linear-gradient( top, #0C93C0, #FFF ); /* Op11.10-12.02 */
background-image: linear-gradient( to bottom, #0C93C0, #FFF ); /* W3C, Fx16+, Chrome26+, IE10+, Op12.10+, Saf6.1+ */

Un hecho colateral interesante es que la mayoría de las publicaciones de blog y herramientas de gradientes de navegador en la web, como el famoso " this " de -ms-linear-gradient incluyen el valor MS-prefijo -ms-linear-gradient .
Es compatible con Internet Explorer 10 Consumer Preview en. Pero cuando se incluye el linear-gradient valores estándar, Internet Explorer 10 Release Preview lo representa de manera adecuada.
Entonces, al incluir -ms-linear-gradient y standards way, con -ms , en realidad solo se dirige a IE10 Consumer Preview, que no -ms a nadie de su audiencia.

Answer 5

background-image: -ms-linear-gradient(right, #0c93C0, #FFF);
background-image: -o-linear-gradient(right, #0c93C0, #FFF);

Todas las propiedades experimentales de CSS obtienen un prefijo:

• -webkit- para navegadores Webkit (Chrome, Safari)
• -moz- para Firefox
• -o- para Opera
• -ms- para Internet Explorer
• no hay prefijo para una implementación que está en completo acuerdo con la especificación.

Usa la esquina top right lugar de la right si quieres un ángulo diferente. Úselo hacia la left o hacia la right si quieres un degradado horizontal.

Ver también:

• MDN: linear-gradient

explorador de Internet

Para <IE10, deberás usar:

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=''#0c93c0'', endColorStr=''#FFFFFF'', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr=''#0c93c0'', endColorStr=''#FFFFFF'', GradientType=0)";

filter funciona para IE6, IE7 (e IE8), mientras que IE8 recomienda el -ms-filter (el valor debe ser citado) en lugar de filter . Se puede encontrar una documentación más detallada para Microsoft.Gradient en: http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx

-ms-filter

Como eres un fan de IE, explicaré la -ms-filter :

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
startColorStr=''#0c93c0'', /*Start color*/
endColorStr=''#FFFFFF'', /*End color*/
GradientType=0 /*0=Vertical, 1=Horizontal gradient*/
);

En lugar de utilizar un color RGB HEX, también puede usar un formato de color ARGB. A significa alfa, FF significa opaco, mientras que 00 significa transparente. La parte GradientType es opcional, la expresión completa no distingue entre mayúsculas y minúsculas.