elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: ¿Eres nuevo? ¿Tienes dudas acerca del funcionamiento de la comunidad? Lee las Reglas Generales


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  CSS3 en IE9: Gradient, border-radius y text-shadow
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: CSS3 en IE9: Gradient, border-radius y text-shadow  (Leído 8,272 veces)
d3xf4ult


Desconectado Desconectado

Mensajes: 332


Ver Perfil WWW
CSS3 en IE9: Gradient, border-radius y text-shadow
« en: 16 Marzo 2011, 13:22 pm »

Hola a tod@s:

Tengo un problema con estas propiedades en Internet Explorer 9 (versión final)

Tengo cuatro propiedades CSS:
Código CSS:

Código
  1. border-radius: 8px 8px 8px 8px;
  2. -moz-border-radius: 8px 8px 8px 8px;
  3. -webkit-border-radius: 8px 8px 8px 8px;
  4.  
  5. box-shadow: 1px 1px 5px #585858;
  6. -moz-box-shadow: 1px 1px 5px #585858;
  7. -webkit-box-shadow: 1px 1px 5px #585858;
  8.  
  9. text-shadow: 1px 2px 1px #000000;
  10.  
  11. background: -moz-linear-gradient(center top ,#37598e, #101116) repeat scroll 0 0 transparent;
  12. background:-webkit-gradient(linear, left top, left bottom, from(#37598e), to(#101116));
  13. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#37598e', endColorstr='#101116');

A) box-shadow-> ahora es compatible con la nueva versión de IE9, no tengo problema en nada.

B) text-shadow -> no es compatible aun con IE9?? sabe alguien que puedo utilizar en su lugar para un correcto funcionamiento en IE9?.

C) border-radius -> Por qué en algunos selectores (en estos casos "div id") cuando declaro esta propiedad me funcionan en IE9 pero en otros selectores no?. Aclaro que estoy declarando la misma propiedad pero con otros valores similares.

D) Bien, a parte de este anterior, otro gran problema viene con la propiedad background y su nuevo valor en CSS3 "gradient" (para conseguir desagrados):
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr='VALOR', endColorstr='VALOR'); -> para IE9, Por que se aplica en algunos selectores "div id" y en otros no?, al igual que border-radius, es la misma sentencia pero solamente cambio el valor del color.

No creo que sea problema de compatibilidad ya que, como ya dije, IE9 me reconoce las propiedades y valores pero en algunos casos me los aplica y en otros no.


En línea

d3xf4ult


Desconectado Desconectado

Mensajes: 332


Ver Perfil WWW
Re: CSS3 en IE9: Gradient, border-radius y text-shadow
« Respuesta #1 en: 17 Marzo 2011, 01:18 am »

Por favor, si alguien tiene alguna idea de cual puede ser el problema o la causa de lo mencionado, agradecería alguna respuesta.


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: CSS3 en IE9: Gradient, border-radius y text-shadow
« Respuesta #2 en: 17 Marzo 2011, 01:56 am »

IE siempre ha sido así. Tienes que buscar fixes o bypass para eso. Lo de text-shadow creo que había un complemento que al añadirlo al css funcionaba perfectamente hasta con IE7. Y si no puedes usar jquery y sus complementos.


PD: IE también tiene un filter para los shadow's pero no es nada en comparación del que trae CSS3.



Saludos
En línea

d3xf4ult


Desconectado Desconectado

Mensajes: 332


Ver Perfil WWW
Re: CSS3 en IE9: Gradient, border-radius y text-shadow
« Respuesta #3 en: 17 Marzo 2011, 02:20 am »

IE siempre ha sido así. Tienes que buscar fixes o bypass para eso. Lo de text-shadow creo que había un complemento que al añadirlo al css funcionaba perfectamente hasta con IE7. Y si no puedes usar jquery y sus complementos.

PD: IE también tiene un filter para los shadow's pero no es nada en comparación del que trae CSS3.

Saludos

Gracias por tu respuesta.

Quizás no me expliqué bien...
No estoy diciendo que no sean compatibles, ya sé y muchos ya saben IE como tu bien dices "siempre ha así".

Lo que yo pregunto es:
No es raro que en IE9 en algunos selectores div id donde yo tengo en el bloque de sentencia las propiedades que están arriba, funcionen pero sin embargo en otro div id dentro de su bloque de sentencias con las mismas propiedades no funciona?
Con esto IE9 demuestra que si que reconoce dichas propiedades pero por que en algunos div id las muestra y en otros no?? SI SON IGUALES! (simplemente con un id diferente, obviamente).
En línea

Nakp
casi es
Ex-Staff
*
Desconectado Desconectado

Mensajes: 6.336

he vuelto :)


Ver Perfil WWW
Re: CSS3 en IE9: Gradient, border-radius y text-shadow
« Respuesta #4 en: 17 Marzo 2011, 03:45 am »

al parecer ni opera ni IE9 soportan los gradientes en el fondo, en este articulo lograron algo muy similar usando imagenes svg en el fondo :P

http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/
En línea

Ojo por ojo, y el mundo acabará ciego.
d3xf4ult


Desconectado Desconectado

Mensajes: 332


Ver Perfil WWW
Re: CSS3 en IE9: Gradient, border-radius y text-shadow
« Respuesta #5 en: 17 Marzo 2011, 13:49 pm »

al parecer ni opera ni IE9 soportan los gradientes en el fondo, en este articulo lograron algo muy similar usando imagenes svg en el fondo :P

http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/

Gracias! aún no lo miré a fondo pero lo miraré, quizás puede servirme para algo.

Quiero mostrar dos imágenes, en las que veremos las diferencias más claramente de lo que intento decir.
1º)


2º)


En la 1º imagen podemos ver, que las propiedades:
box-shadow: es compatible con los 5 navegadores mostrados.
text-shadow: es compatible con los 4 citados, menos con IE9.

Pero ahora viene lo interesante!:
border-radius:
- En la 1º imagen vemos que es compatible con los 5 navegadores.
- En la 2º imagen vemos que ya no, solo con 4 de ellos por que IE9 no lo reconoce en ese div la propiedad. Y mi pregunta es por que ocurre esto cuando es la misma propiedad para cada caso??

Gradient:
- En la 1º vemos que IE9 y Opera NO lo reconocen, y el resto si.
- En la 2º vemos que Opera sigue sin reconocerlo, PERO IE9 lo reconoce de repente!. Me pregunto lo mismo. Por que en lado si y en otro??. Cuando las propiedades son las mismas.
« Última modificación: 17 Marzo 2011, 13:51 pm por d3xf4ult » En línea

Nakp
casi es
Ex-Staff
*
Desconectado Desconectado

Mensajes: 6.336

he vuelto :)


Ver Perfil WWW
Re: CSS3 en IE9: Gradient, border-radius y text-shadow
« Respuesta #6 en: 18 Marzo 2011, 01:54 am »

precisamente eso trata el articulo... usa svg con gradientes como backgrounds para ie9 y opera

sobre el border-radius.. usas clases distintas para ambos casos?
En línea

Ojo por ojo, y el mundo acabará ciego.
d3xf4ult


Desconectado Desconectado

Mensajes: 332


Ver Perfil WWW
Re: CSS3 en IE9: Gradient, border-radius y text-shadow
« Respuesta #7 en: 18 Marzo 2011, 02:48 am »

precisamente eso trata el articulo... usa svg con gradientes como backgrounds para ie9 y opera

sobre el border-radius.. usas clases distintas para ambos casos?

Se de lo que se trata pero, como puedo aplicar (a un ejemplo práctico) SVG?.
Y si usara unas imágenes como fondo, claro que se me solucionaría el problema pero quiero evitar hacerlo, aunque si no queda más remedio, tendré que generarlas.

Y con border-radius (como puedes ver arriba el código, en el planteamiento de este post), si, uso distintas clases únicas "div id", una para el menú que se muestra en la captura 1º y otra clase única para el sidebar. Pero eso no debería de influir, al menos eso creo. Ya que añado las MISMAS propiedades en un div que en otro y como se ve en la captura: Donde IE9 me reconoce border-radius en la 2º no y con los gradient lo mismo pero viceversa. No se que pasa...

Por que estoy tan pesado con esto...jaja:
Por que si dijéramos: -Bueno, pues no me reconoce en NINGÚN lado las propiedades ni Opera ni IE9, pues ya estaba pongo imágenes con fondos redondeados y listo!.-
Pero al ver que en unas me las reconoce y en otras no..., y saber que entonces puede ser posible utilizar CSS para conseguirlo, pues mejor.
De ese modo el navegador no tendrá que cargar las imágenes, si no que en su lugar, gestionará unas lineas de código que le resultarán menos tediosas de cargar que unos backgrounds.
En línea

Nakp
casi es
Ex-Staff
*
Desconectado Desconectado

Mensajes: 6.336

he vuelto :)


Ver Perfil WWW
Re: CSS3 en IE9: Gradient, border-radius y text-shadow
« Respuesta #8 en: 18 Marzo 2011, 03:03 am »

para serte sincero no tengo ni idea del por que funciona en un lado y en otro no... pero preferiria ver el CSS de ambas definiciones... sobre el svg se puede cargar condicionalmente si es IE9 u Opera en un stylesheet distinto xD creo que es el unico workaround disponible a los gradinetes por el momento... opera desde la version 11.10+ soporta los gradientes CSS añadiendo -o como prefijo a la regla
En línea

Ojo por ojo, y el mundo acabará ciego.
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Modificar Border Style en tiempo de ejecución
Programación Visual Basic
karmany 0 2,149 Último mensaje 19 Marzo 2006, 14:26 pm
por karmany
Pack 500 Gradient (Degradados)
Diseño Gráfico
Axus 2 3,128 Último mensaje 17 Enero 2008, 22:04 pm
por Azielito
¿Qué clientes de correo soportan CSS3?
Noticias
wolfbcn 0 1,571 Último mensaje 17 Mayo 2010, 21:21 pm
por wolfbcn
Y que tal una sección de CSS - CSS3 « 1 2 »
Sugerencias y dudas sobre el Foro
peib0l 14 6,800 Último mensaje 19 Abril 2011, 18:17 pm
por RedZer
CSS En un menú border-radius
Desarrollo Web
WIитX 5 2,255 Último mensaje 10 Febrero 2016, 22:41 pm
por DeIMachine
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines