Gradiente lineal cruzado CSS3

¿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); 

     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

     /*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.

    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 este sitio web. Microsoft ha construido su propio generador aquí .

    ¿Has probado Ultimate CSS Gradient Generator de Colorzilla ?

    ¡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 :).

    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 syntax 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 ” Generador de gradiente CSS CSS ” 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.