Emulando CSS3 border-radius y box-shadow en IE7/8

Estoy trabajando en HTML para una pequeña aplicación web; el diseño requiere un área de contenido con esquinas redondeadas y una sombra paralela. He sido capaz de producir esto con CSS 3, y funciona sin problemas en Firefox y Chrome:Emulando CSS3 border-radius y box-shadow en IE7/8

CSS3 Version

Sin embargo, Internet Explorer 7 y 8 (CSS3 no apoyar) es una historia diferente:

Internet Explorer Version

Existe una solución de JavaScript sencilla y liviana que me permite 1) usar funciones específicas de IE para lograr esto, o 2) modificar el DOM (programáticamente) de tal manera que agrega imágenes personalizadas alrededor del contenido área para emular el efecto?

Fuente

2010-04-22 Adam Maras

en mi opinión, no hay una buena solución a este problema además de hacerlo con imágenes. Las esquinas redondeadas JS están colocando elementos en sus esquinas con la imagen de fondo/color para crear este efecto en IE. creo que no es una solución adecuada. Usaría una solución con imágenes o esperaré a IE9: P PS: me gusta este diseño. – meo

Este es mi método, utilizo los condicionales para apuntar archivos CSS para los navegadores IE.

Digamos que tiene su div con el id #page_container. En su archivo regular master.css o css3.css, le daría su ancho, alto, esquinas redondeadas y sombra paralela con estilos.

Ahora, cuando IE llega a su página, activará la condición css que configuró. Para ese mismo div # page_container, puede modificar el ancho un poco, la altura, tal vez un relleno, y luego darle una imagen de fondo para que se vea como la sombra paralela, la versión de esquina redondeada.

Así que su cabeza tendrá esto:

<head> 
<link rel="stylesheet" type="text/css" href="master.css" /> 
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> 
</head>

En el archivo master.css, que tendría esta definición para su div principal:

div#page_container { 
    width: 960px; 
    height: auto; 
    padding: 10px 10px 10px 10px; 
    background: #ccc; 
    drop-shadow: whatever... 
    rounded-corner: whatever... 
}

Ahora, en su decir. archivo css, y porque se hace referencia en su segundo, la definición será en cascada abajo para que pueda modificarlo un poco:

div#page_container { 
    width: 960px; 
    height: auto; 
    padding: 15px 15px 15px 15px; /* this is key */ 
    background: #ccc url(/path/to/image.file) no-repeat top left; 
}

Agregue suficiente relleno adicional para que las sombras caigan dentro de su imagen de fondo. Debido a que cae en cascada, sobrescribirá el relleno original de 10px que tenía, expandiendo el modelo de caja para que encaje en sus gráficos paralelos adicionales.

beneficios pareja para este método incluyen:

Sólo IE verá esta definición y la llamada a la imagen. Si se trata de una aplicación de gran volumen, ahorrará ancho de banda y retrasos asociados con la llamada.
Del mismo modo, debido a que no codificaba en los gráficos de esquina redondeada que vería cada navegador, los usuarios de Firefox y Safari no necesitarán golpear el servidor con llamadas de imagen adicionales.
No hay necesidad de añadir en otro Javascript plug-in que comprueba IE, crea nuevas marcas, tiempo, etc ...

Fuente

2010-04-30 20:54:00 Braxo

He elegido ir con esta solución ya que parece ser la más limpia. Incorporaré un toque de JavaScript solo de IE para ayudar con algunas de las modificaciones del nivel DOM para hacer esto un poco más limpio también. –

@ Adam Maras - sabia elección. He utilizado complementos diferentes en diferentes proyectos y siempre tuve problemas porque el complemento afectaba a algunos de mis elementos. Ahora, para el año pasado, utilicé un enfoque similar a este y puedo decir que vale la pena en grandes proyectos. Me gustaría ir con un complemento para un sitio simple de <5 páginas. – easwee

Esta pudo haber sido la forma en que el autor fue, pero creo que algunos de los complementos (particularmente pie.htc) han recorrido un largo camino y merecen una mirada adicional. Este método desperdicia tiempo de desarrollo reduciendo imágenes para los navegadores que están perdiendo cuota de mercado, en lugar de incluir una solución (como pie.htc) que funciona en IE6-8 con un alboroto y problemas mínimos. Resistí los complementos durante mucho tiempo, pero ahora se han convertido en una herramienta invaluable en el arsenal. – LocalPCGuy

Hay un plugin jquery que modifica el DOM para producir esquinas redondeadas. Échale un vistazo aquí:

http://blue-anvil.com/jquerycurvycorners/test.html

Hay página de ejemplo representado para mí en IE, Chrome y FF. Usando Firebug puedes ver que el complemento introduce un montón de divs de 1px por 1px que crean el efecto.

Fuente

2010-04-25 04:39:29 rcravens

Nifty Corners Cube produce buenos resultados y se supone que es compatible hacia abajo hasta IE5.5.

Fuente

2010-04-25 04:47:30 Esko

Antes que nada me gustaría mencionar que no hay una solución perfecta para esto hasta IE9, donde se implementará el radio de borde CSS.

Estas son las diferentes soluciones que tienen hasta entonces:

Se puede usar uno de los muchos JS scripts que simula las esquinas redondeadas. Pero ninguno de ellos implementa la sombra correctamente. Aquí está la lista de los guiones que probé y mis conclusiones. Todos estos scripts tienen algo en común, están colocando elementos adicionales en su HTML para darle la ilusión de esquinas redondeadas.

DD Roundies: Este script es un muy ligero funciona bastante bien. Funciona sin ningún framework y funciona bien con jQuery & Prototype (supongo que funciona bien con los demás, pero no puedo asegurarlo). Utiliza las propiedades de CSS3 en los navegadores que admiten CSS3. Y usa el mismo truco que todos los demás para IE. El antializante en este funciona muy bien. editar tengo que corregirme aquí. Éste trabaja con un archivo HTC. No coloca elementos adicionales en tu HTML.
Curvy Corners y la jQuery Plugin Curvy Corners: me gusta éste a. El antializante está funcionando muy bien para. Y juega bien con las imágenes de fondo. Pero no funciona bien con las sombras CSS3. No verifica si su navegador admite CSS3 y siempre usa la fea solución de agregar elementos a su dominio.
Nifty Corners & jquery Corner: Ambos tienen una mala antialiazing y las esquinas se ven muy nervioso. Las esquinas jQuery tienen problemas para manejar imágenes de fondo.

Aquí es la razón por la que ninguno de ellos es una solución adecuada en mi opinión:

curvy corners dom messing screenshot http://meodai.ch/stackoverflow/curvy.png dom curvas desastre

nifty dom mess http://meodai.ch/stackoverflow/nifty.png dom ingenioso desastre

Hay algunos otros, pero Creo que no se pueden mencionar en este lugar.

Como puede ver, están agregando muchos elementos a su dom. Esto puede causar problemas si desea agregar esquinas redondeadas a una gran cantidad de elementos. Puede hacer que algunos navegadores/computadoras más antiguos se cuelguen. Para las sombras, es prácticamente el mismo problema. No es un plugin de jQuery que se encarga de sombras en las cajas y fuentes: http://dropshadow.webvex.limebits.com/

Mi conclusión: si estoy haciendo un trabajo pequeño presupuesto, los usuarios de IE sólo tienen bordes y sin sombras. Si el cliente tiene algo de dinero para gastar, lo hago solo con CSS y hago imágenes para cada esquina. Si es absolutamente necesario que estén allí, pero no hay tiempo ni dinero para hacerlo, utilizo uno de los JS Scripts DD_roundies mencionados con preferencia. Ahora depende de ti.

PS: los usuarios de IE se utilizan para las interfaces feas, ellos no van a ver que las esquinas y las sombras han desaparecido todos modos: P

Fuente

2010-04-26 18:05:02 meo

+1 para el 'PS' plus Creo que CSS debe permitirse una degradación elegante si las funciones más nuevas/más frescas no están presentes. También creo que los usuarios de IE merecen sufrir un poco, pero eso es solo que soy vengativo ... =) –

+1 para la PS también. No podría estar más de acuerdo. IE es la perdición de todos los desarrolladores web. –

Control hacia fuera este mensaje: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

Cubre esquinas redondeadas y específicamente sombra de caja para CSS3 en IE7/8.

Fuente

2010-04-28 12:53:34

+1 parece una buena solución para mí. Los probé en IE6, 7 y 8, y son bastante lentos, pero funcionan. (especialmente las esquinas redondeadas tardaron solo 4 esquinas, me pregunto cómo cubre una página entera) – meo

La pregunta es si estas soluciones interactuarán para darme las esquinas redondeadas * y * las sombras paralelas. Yo investigaré. –

puede combinar las dos técnicas. El problema con esto es que su servidor puede cargar archivos HTC. – meo

de sombra base en el IE usar:

.shadow { 
    background-color: #fff; 
    zoom: 1; 
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); 
}

de esquinas redondas usar DD_roundies como se menciona a continuación, simplemente 9Kb es un buen compromiso para tener la esquina redonda en un segundo! ;-)

por supuesto para programmatically IE-specific features uso conditional comments! ;-)

Fuente

2010-04-29 11:47:07

He empezado a utilizar la secuencia de comandos .htc encontrado aquí: CSS3 support for Internet Explorer 6, 7, and 8

Es la aplicación más simple de CSS3 para IE6 + que he visto.


.box { 
    -moz-border-radius: 15px; /* Firefox */ 
    -webkit-border-radius: 15px; /* Safari and Chrome */ 
    border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ 

    -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ 
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ 
    box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ 

    behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */ 
}

Fuente

2010-04-29 22:29:45 MikeM

Se acaba de publicar y está en beta, pero echa un vistazo: http://css3pie.com/

Fuente

2010-07-20 17:38:25 CTarczon

CSS3 PIE es increíble !. ¡Está en la etapa beta2! – hitautodestruct

¡Esto es asombroso! Todavía no he comprobado ie7, pero seguro que se ve exactamente como debería en ie8. –

para permitir la degradación elegante apuesto a que use este script llamado CssUserAgent de http://www.cssuseragent.org/

Fuente

2011-02-01 14:19:13 Joberror

he estado usando CSS3PIE, que es bastante fácil de implementar, sólo tiene que añadir un comportamiento: url (pie.htc); a la etiqueta css y está listo para ir ... lo hace todo por usted, también incluye soporte para border-image, gradients, box-shadow, rgba y algunos otros ... la fuente está en: http://css3pie.com/

Fuente

2011-03-11 18:32:08 Tim

Emulando CSS3 border-radius y box-shadow en IE7/8

Respuesta

Cuestiones relacionadas