Foros del Web » Creando para Internet » CSS »

CSS3 en IE9: Gradient, border-radius y text-shadow

Estas en el tema de CSS3 en IE9: Gradient, border-radius y text-shadow en el foro de CSS en Foros del Web. Hola a [email protected]: Tengo un problema con estas propiedades en Internet Explorer 9 (versión final) Tengo cuatro propiedades CSS : @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver ...
  #1 (permalink)  
Antiguo 15/03/2011, 19:55
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Pregunta CSS3 en IE9: Gradient, border-radius y text-shadow

Hola a [email protected]:

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

Tengo cuatro propiedades CSS:
Código CSS:
Ver original
  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.
  #2 (permalink)  
Antiguo 16/03/2011, 09:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

¿ie9?
La misma mierda con un número mayor. Hubiera sido un buen navegador... hace tres años.
No tengo respuestas y mucho menos solucciones a sus fallos con el css (para eso están los que han cobrado por desarrollarlo).
Tampoco he podido testearlo (la versión final que ha salido esta semana), sólo he visto un par de páginas con él. Y es de pena. Cuestiones resueltas en la ver.8 fallan en la 9.
Ni @font-face muestra. Y eso que estaban avisados.

En definitiva, si no había bastante con tener que modificar 3 veces los códigos para ie8, ie7, ie6 (quien le de soporte), ahora se suma el 9.

Esperemos que saquen pronto el service pack correspondiente o la versión 10.

Pero sí han hecho una cosa bien: sólo es compatible con vi$ta y 7. Por usuarios de Xp y anteriores no hay que preocuparse.

Edito y amplío:
Por cierto, combine en un mismo div border-radius y box-shadow, verá que bonito queda (

Última edición por kseso?; 16/03/2011 a las 09:35
  #3 (permalink)  
Antiguo 16/03/2011, 11:23
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

@kseso?
Gracias por tu respuesta

Yo simplemente lo que quería era alguna solución para optimizar una website en IE9.
Con IE7 e IE8 ya costaba encontrar algo que puediese valer por temas de compatibilidad (en CSS). Pero con la llegada de IE9 (final) pensaba que estos problemas se podrían resolver (por lo menos algunos de ellos), pero ya veo que no incluso en algunos casos se empeora.

Cita:
Iniciado por kseso? Ver Mensaje
Por cierto, combine en un mismo div border-radius y box-shadow, verá que bonito queda
A que te refiere con eso?

Es lo que hago, en un mismo selector div adjunto todas las propiedades citadas anteriormente, que se muestran arriba, y en otro selector div distinto (con otra id), escribo las mismas propiedades pero con diferentes valores. Y lo extraño es que en IE9 me reconoce ciertas propiedades en un div y otro no me las reconoce, siendo las mismas propiedades en ambos. Por qué?
  #4 (permalink)  
Antiguo 16/03/2011, 12:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

Con lo de combinar radius y shadow me refería a esto:
  #5 (permalink)  
Antiguo 16/03/2011, 20:00
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

Cita:
Iniciado por kseso? Ver Mensaje
Con lo de combinar radius y shadow me refería a esto:
Bueno eso quizás depende de los valores que se pongan en dichas propiedades, por que la verdad es que nunca vi ese efecto en IE jaja.

Yo probé y probé intercalando las dos y también las dos adjuntas en un mismo bloque de sentencias y nunca me paso nada así...
  #6 (permalink)  
Antiguo 17/03/2011, 07:53
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

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 un lado si y en otro??. Cuando las propiedades son las mismas.

Última edición por d3xf4ult; 17/03/2011 a las 07:54 Razón: Corregir frase
  #7 (permalink)  
Antiguo 17/03/2011, 11:26
Avatar de seocusco  
Fecha de Ingreso: febrero-2011
Mensajes: 53
Antigüedad: 6 años, 10 meses
Puntos: 4
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

nooo, ahora cuando maquetemos tendremos otro IE con quien rompernos la cabeza
__________________
Viaje a Cusco y Machu Picchu
  #8 (permalink)  
Antiguo 17/03/2011, 11:39
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

Cita:
Iniciado por seocusco Ver Mensaje
nooo, ahora cuando maquetemos tendremos otro IE con quien rompernos la cabeza
Ya amigo seocusco... otro quebradero más de cabeza.

Ahora que ya subí las imágenes de captura de pantalla sobre lo que quería decir, si alguien sabe por que entonces me ocurre esto, que lo haga saber, no solo a mi si no a todos los que puedan leer este post y así solventar dudas.
Gracias.
  #9 (permalink)  
Antiguo 03/05/2011, 07:53
 
Fecha de Ingreso: enero-2007
Mensajes: 51
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

Lo que conseguí para crear Gradient en ie fue

#id {
filter: progid:DXImageTransform.Microsoft.Gradient(
gradientType=0,startColorStr=#d8cde9,
endColorStr=#8f7eac);
}

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="aaaaa" />
	<title>Untitled 1</title>
<script type="text/javascript">
<!-- Toggle the Enabled property to toggle the gradient.  -->
function fnToggle(oObj) {
    if (oDiv.filters(0).enabled){
        oDiv.filters(0).enabled='false';
        oObj.innerText='Add Gradient';}
    else {                                                        
        oDiv.filters(0).enabled='true';
        oObj.innerText='Make Normal';}
}
</script>
</head>
<body>

        <font size="+5">
            <div id="oDiv" style="height:120px; color:green; filter: 
                    progid:DXImageTransform.Microsoft.gradient(enabled='false',
                        startColorstr=#550000FF, endColorstr=#55FFFF00)" >
                A simple gradient   
            </div>
        </font>
        <p>
        <button onclick="fnToggle(this)">Add Gradient</button><br/></p>
</body>
</html> 
solo lo probe en ie5 hasta el ie8 y funciona correctamente
  #10 (permalink)  
Antiguo 03/05/2011, 08:07
 
Fecha de Ingreso: enero-2007
Mensajes: 51
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

aqui les dejo para crear sombras

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="aaaaa" />
	<title>Untitled 1</title>
<script type="text/javascript">
function fnDepress() {
var bState = oFilterDIV.filters.item('DXImageTransform.Microsoft.dropshadow').enabled;
oFilterDIV.filters.item('DXImageTransform.Microsoft.dropshadow').enabled = !bState;
}
</script>
</head>
<body>
    <div id="oFilterDIV" style="cursor:hand;height:160px; padding:10px; font:bold 13pt verdana;  
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true');" onclick="fnDepress();">
        This is the DIV content.
    </div>
</body>
</html> 
  #11 (permalink)  
Antiguo 03/05/2011, 08:22
 
Fecha de Ingreso: enero-2007
Mensajes: 51
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

seme había olvidado mencionar esto

Código CSS:
Ver original
  1. .gradientClass
  2. {
  3.   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); /* IE6 & IE7 */
  4.   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC')"; /* IE8 */
  5. }
  #12 (permalink)  
Antiguo 03/05/2011, 08:38
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

Cita:
Iniciado por escudo40 Ver Mensaje
seme había olvidado mencionar esto

Código CSS:
Ver original
  1. .gradientClass
  2. {
  3.   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); /* IE6 & IE7 */
  4.   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC')"; /* IE8 */
  5. }
Gracias por la info. He probado solo con IE9 y no funciona... Yo creo que es problema de como están heredadas las clases (class y id) de los elementos. Por que si no, no entiendo por en en unos casos si funcionan ciertas propiedades y en otros casos no... (hablo del código no de los navegadores).

Y lo único diferente que encuentro en las lineas CSS que nombras es: GradientType=0

Saludos ;)
  #13 (permalink)  
Antiguo 03/05/2011, 10:12
 
Fecha de Ingreso: enero-2007
Mensajes: 51
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: CSS3 en IE9: Gradient, border-radius y text-shadow

ie bordes
puedes usar IETester para probar con todas las versiones de ie http://www.my-debugbar.com/wiki/IETester/HomePage
yo en este momento investigando e conseguido como redondear bordes en ie

http://www.anieto2k.com/2008/12/05/b...rnet-explorer/

Pero me genera incompatibilidad con las sombras y el degradado

opera degradados
http://stackoverflow.com/questions/4...dient-in-opera

Última edición por escudo40; 03/05/2011 a las 10:18

Etiquetas: Ninguno
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 18:36.