degradado - html background image gradient
Colores degradados en Internet Explorer (10)
Desde el article ScriptFX.com:
<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>
Sé que Internet Explorer tiene algunas extensiones propietarias para que pueda 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?
Dos cosas que descubrí mientras luchaba con IE 9 gradiente.
- El
-ms-filterno funcionó para mí. Tuve que usar simplementefilter. - Tuve que agregar
height: 100%a mi clase para que IE use el degradado.
El código que uso para todos los degradados 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;
Tendrá que especificar una altura o un zoom: 1 para aplicar hasLayout al elemento para que esto funcione en IE.
Actualizar:
Aquí hay una versión LESS Mixin (CSS) para todos los usuarios MENOS que hay:
.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 de filter debería funcionar para IE8 e IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=''#e6e6e6'', endColorstr=''#CCCCCC'');
}
Gran herramienta de Microsoft, le permite examinar 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%);
Mire los filtros de CSS personalizados que IE puede manejar http://msdn.microsoft.com/en-us/library/ms532847.aspx
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+ */
}
Solo pensé en agregar este útil enlace: http://css3please.com/
Muestra cómo obtener gradientes que funcionan en todos los navegadores.
Tenga en cuenta que IE10 admitirá degradados de la siguiente manera:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Un error importante 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;
... matan el tipo claro en cualquier texto cubierto por el degradado. Dado que el propósito de los gradientes es normalmente hacer que la interfaz de usuario se vea mejor, eso es un obstáculo para mí.
Entonces, para IE uso una imagen de fondo repetitiva. Si la imagen de fondo css se combina con el CSS de degradado para otros navegadores (según la respuesta de Blowsie), otros navegadores ignorarán la imagen de fondo a favor del CSS de degradado, por lo que solo se aplicará a IE.
background-image: url(''/Content/Images/button-gradient.png'');
Hay muchos sitios que puede usar para generar rápidamente un fondo degradado; Yo uso this