Hacer que funcione este código en IE

[lauchag95]

Tengo este código:

Código CSS:

background-image: -moz-linear-gradient(top, #0d4f91, #00060d);
background-image: -webkit-gradient(linear, center top, center bottom, from(#0d4f91), to(#00060d));
 

que lo que genera es un div con unos efectos muy buenos...
que se ven bien en FF y en Chrome, pero no se ve en IE!

Alguien sabe implementarlo en IE?

[rhp07]

Hola, en un proyecto que tuve que hacer tuve el mismo problema. Te enseño mis soluciones.. Estuve buscando codigo que sea compatible con la mayor cantidad posible de navegadores. Aquí tienes el código:

Código CSS:

background-image: url(template_images/gradient.svg);
  background-size: 100% 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  background-color: #DBDBDB; /* old browsers */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DBDBDB',GradientType=0 ); /* ie */
  background-image: -o-linear-gradient(rgb(255,255,255),rgb(219,219,219));
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, #DBDBDB),color-stop(0.52, #FFFFFF));
  background-image: -moz-linear-gradient(center bottom,#DBDBDB 4%,#FFFFFF 52%);
 

Te lo explico por partes: Los 3 navegadores que lo soportan son
OPERA: background-image: -o-linear-gradient(rgb(255,255,255),rgb(219,219,219));

GOOGLE CHROME.. etc: background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, #DBDBDB),color-stop(0.52, #FFFFFF));

MOZILLA: background-image: -moz-linear-gradient(center bottom,#DBDBDB 4%,#FFFFFF 52%);

Para internet explorer puedes usar imágenes vectoriales svg que te darán el mismo efecto usando este codigo:
background-image: url(template_images/gradient.svg);
background-size: 100% 100%;
background-repeat: repeat-x;
background-position: 0 0;

Para versiones anteriores de internet explorer usa esto:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DBDBDB',GradientType=0 ); /* ie */
Lo único malo que tiene es que no soporta bordes curvados.. lo que no importa en navegadores viejos que no lo sportan.

Y para el resto de navegadores que simplemente no lo sporten.. usa ésto:
background-color: #DBDBDB;


Espero haberte ayudado. Un saludo, Robert.

[lauchag95]

Iniciado por rhp07

Hola, en un proyecto que tuve que hacer tuve el mismo problema. Te enseño mis soluciones.. Estuve buscando codigo que sea compatible con la mayor cantidad posible de navegadores. Aquí tienes el código:

Código CSS:

background-image: url(template_images/gradient.svg);
  background-size: 100% 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  background-color: #DBDBDB; /* old browsers */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DBDBDB',GradientType=0 ); /* ie */
  background-image: -o-linear-gradient(rgb(255,255,255),rgb(219,219,219));
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, #DBDBDB),color-stop(0.52, #FFFFFF));
  background-image: -moz-linear-gradient(center bottom,#DBDBDB 4%,#FFFFFF 52%);
 

Te lo explico por partes: Los 3 navegadores que lo soportan son
OPERA: background-image: -o-linear-gradient(rgb(255,255,255),rgb(219,219,219));

GOOGLE CHROME.. etc: background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, #DBDBDB),color-stop(0.52, #FFFFFF));

MOZILLA: background-image: -moz-linear-gradient(center bottom,#DBDBDB 4%,#FFFFFF 52%);

Para internet explorer puedes usar imágenes vectoriales svg que te darán el mismo efecto usando este codigo:
background-image: url(template_images/gradient.svg);
background-size: 100% 100%;
background-repeat: repeat-x;
background-position: 0 0;

Para versiones anteriores de internet explorer usa esto:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DBDBDB',GradientType=0 ); /* ie */
Lo único malo que tiene es que no soporta bordes curvados.. lo que no importa en navegadores viejos que no lo sportan.

Y para el resto de navegadores que simplemente no lo sporten.. usa ésto:
background-color: #DBDBDB;


Espero haberte ayudado. Un saludo, Robert.

Gracias!