Gradiente de colores en Internet Explorer

StackOverflow https://stackoverflow.com/questions/213750

Pregunta

Sé que Internet Explorer tiene algunas extensiones propietarias para que puedas hacer cosas como crear divs con un fondo degradado. No puedo recordar el nombre del elemento o su uso. ¿Alguien tiene algunos ejemplos o enlaces?

¿Fue útil?

Solución

Mire los filtros CSS personalizados que IE puede manejar http://msdn.microsoft.com/en-us/library/ms532847.aspx

Otros consejos

El código que utilizo para todos los gradientes del navegador: 

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

Deberá especificar una altura o zoom: 1 para aplicar hasLayout al elemento para que esto funcione en IE.

Actualización :

Aquí hay una versión de LESS Mixin (CSS) para todos los usuarios de LESS: 

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}
El estilo

filter debería funcionar para IE8 y IE9. 

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}

Un problema significativo cuando se trata de gradientes en IE es que, aunque puedes usar los filtros de Microsoft ... 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;

... eliminan el tipo claro en cualquier texto cubierto por el degradado. Dado que el propósito de los gradientes normalmente es hacer que la interfaz de usuario se vea mejor, eso es un impedimento para mí.

Así que para IE utilizo una imagen de fondo que se repite. Si la imagen de fondo css se combina con el gradiente de CSS para otros navegadores (según la respuesta de Blowsie), otros navegadores ignorarán la imagen de fondo a favor del gradiente css, por lo que solo se aplicará a IE. 

background-image: url('/Content/Images/button-gradient.png');

Hay muchos sitios que puedes usar para generar rápidamente un fondo degradado; Utilizo esto .

Gran herramienta de Microsoft, le permite examinar los colores en tiempo real y genera CSS para todos los navegadores: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html 

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

Pensé en añadir este enlace útil: http://css3please.com/

Muestra cómo hacer que los gradientes funcionen en todos los navegadores.

Tenga en cuenta que IE10 admitirá gradientes de la siguiente manera: 

background: -ms-linear-gradient(#017ac1, #00bcdf);

Desde ScriptFX.com artículo : 

<body bgcolor="#000000" topmargin="0" leftmargin="0">

    <div style="width:100%;height:100%; filter: progid:
        DXImageTransform.Microsoft.Gradient (GradientType=1,
        StartColorStr='#FF006600', EndColorStr='#ff456789')">

Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below

    </div>
</body>

Prueba esto: 

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}

Dos cosas que descubrí mientras luchaba con el gradiente de IE 9.

  1. El -ms-filter no funcionó para mí. Tuve que usar simplemente filter .
  2. Tuve que agregar height: 100% a mi clase para que IE use el gradiente.
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top