Foros del Web » Creando para Internet » CSS »

Degradado radial compatible con IE9

Estas en el tema de Degradado radial compatible con IE9 en el foro de CSS en Foros del Web. Hola, en mi web que estoy creando he añadido un degradado radial en el fondo. En todos los navegadores funciona correctamente, y como no podía ...
  #1 (permalink)  
Antiguo 12/10/2012, 13:00
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 9 años
Puntos: 4
Pregunta Degradado radial compatible con IE9

Hola, en mi web que estoy creando he añadido un degradado radial en el fondo. En todos los navegadores funciona correctamente, y como no podía fallar en IE da algunos problemas.

He añadido el código a través de una herramienta online, que siempre utilizo para estas cosas.

http://www.colorzilla.com/gradient-editor/

El código CSS generado es el siguiente:

Código CSS:
Ver original
  1. background: #ffffff;
  2. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNTQ2NTcwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  3. background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #546570 100%);
  4. background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#546570));
  5. background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#546570 100%);
  6. background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#546570 100%);
  7. background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#546570 100%);
  8. background: radial-gradient(ellipse at center,  #ffffff 0%,#546570 100%);
  9. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#546570',GradientType=1 );

El degradado con IE9 me sale horizontal, y eso que he añadido compatibilidad con IE9 desde la herramienta online.

¿Cómo puedo arreglar esto?

Un saludo ;)
  #2 (permalink)  
Antiguo 13/10/2012, 14:23
 
Fecha de Ingreso: mayo-2011
Mensajes: 214
Antigüedad: 8 años, 6 meses
Puntos: 16
Respuesta: Degradado radial compatible con IE9

Mira, tu problema es senzillo de resolver, IE no se traga los radiales en css! xD, y yasta.

Pero siempre hay alternativas, que van de poner una foto de fondo con el degradado (no lo recomiendo, pero si nada resulta...) o mirarte esto
http://www.w3schools.com/svg/svg_grad_radial.asp

Esta eramienta llamada SVG, no se si se usa, es buena, mala, o ke, pero es la unica solucion que me se para solucionar este problema con IE!

Espero haber ayudado!
  #3 (permalink)  
Antiguo 14/10/2012, 08:34
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 17 años, 1 mes
Puntos: 317
Respuesta: Degradado radial compatible con IE9

Tal vez no deberías usar esas herramientas si no sabés primero CSS. O tal vez no deberías preguntar en el Foro si primero no buscaste la solución donde corresponde.

Alpha Filter MSDN

Alpha Filter (Editor filtro)

El filtro para gradiente sólo tiene dos direcciones: vertical y horizontal.
Entonces hay que usar una capa con alpha(), que sí tiene un radial.

Pero no olvidés ocultarlo para las versiones superiores a IE8.
  #4 (permalink)  
Antiguo 14/10/2012, 12:16
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 9 años
Puntos: 4
Respuesta: Degradado radial compatible con IE9

Cita:
Iniciado por moro666 Ver Mensaje
Mira, tu problema es senzillo de resolver, IE no se traga los radiales en css! xD, y yasta.

Pero siempre hay alternativas, que van de poner una foto de fondo con el degradado (no lo recomiendo, pero si nada resulta...) o mirarte esto
http://www.w3schools.com/svg/svg_grad_radial.asp

Esta eramienta llamada SVG, no se si se usa, es buena, mala, o ke, pero es la unica solucion que me se para solucionar este problema con IE!

Espero haber ayudado!
Hola! Gracias por pasarte y comentar. Pues la verdad daba por hecho que IE9 soportaba el radial de CSS3, habrá que esperar a IE10 a ver si definitivamente da un soporte total a los estándares web.

Me miraré lo que me comentas, y te digo como ha ido!

Saludos
  #5 (permalink)  
Antiguo 14/10/2012, 12:24
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 9 años
Puntos: 4
Respuesta: Degradado radial compatible con IE9

Cita:
Iniciado por furoya Ver Mensaje
Tal vez no deberías usar esas herramientas si no sabés primero CSS. O tal vez no deberías preguntar en el Foro si primero no buscaste la solución donde corresponde.

Alpha Filter MSDN

Alpha Filter (Editor filtro)

El filtro para gradiente sólo tiene dos direcciones: vertical y horizontal.
Entonces hay que usar una capa con alpha(), que sí tiene un radial.

Pero no olvidés ocultarlo para las versiones superiores a IE8.
Hola! Gracias por pasarte y comentar. Como comenté a moro666, voy a probar lo que comentas y te digo que tal funcionó ;)

PD: Respecto a tu primer comentario, solo quería aclarar que la mejor manera de aprender herramientas es usándolas, aunque no te falta razón con la búsqueda, veo que se ha hablado ya de este asunto.
  #6 (permalink)  
Antiguo 14/10/2012, 12:37
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 17 años, 1 mes
Puntos: 317
Respuesta: Degradado radial compatible con IE9

Cita:
Iniciado por sergi_multimedia Ver Mensaje
Pues la verdad daba por hecho que IE9 soportaba el radial de CSS3, habrá que esperar a IE10 a ver si definitivamente da un soporte total a los estándares web.
Bueno, quizá mi excusa es que no lo uso, pero yo también daba por hecho que era soportado por IE9. Por eso mi recomendación de ocultar el filtro.

Recién es un proyecto para IE10

http://blogs.msdn.com/b/ie/archive/2...preview-1.aspx
  #7 (permalink)  
Antiguo 14/10/2012, 14:38
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: Degradado radial compatible con IE9

Yo llevo esperando a que IE saque cosas desde la 5.5...
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.

Etiquetas: degradado, ie9, radial
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:30.