internet-explorer - interior - box-shadow material design

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

Question

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 podido producir esto con CSS3, y funciona sin problemas en Firefox y Chrome:

Sin embargo, Internet Explorer 7 y 8 (que no son compatibles con CSS3) es una historia diferente:

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

Answer 1

Acaba de lanzarse y está en beta, pero échale un vistazo: http://css3pie.com/

Answer 2

Echa un vistazo a esta publicación: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

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

Answer 3

Empecé a usar el script .htc que se encuentra aquí: compatibilidad con CSS3 para Internet Explorer 6, 7 y 8

Es la implementació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 */
}

Answer 4

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

Aquí están las diferentes soluciones que tiene hasta entonces:

Podría usar uno de muchos scripts JS que simulan esquinas redondeadas. Pero ninguno de ellos implementa la sombra correctamente. Aquí está la lista de los guiones que probé y mis conclusiones. Todos estos guiones 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 muy liviano y 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 el complemento jQuery Curvy Corners : me gusta este. 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 un mal antializante y las esquinas se ven muy nerviosas. Las esquinas jQuery tienen problemas para manejar imágenes de fondo.

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

curvas curvos dom messing captura de pantalla http://meodai.ch//curvy.png curvy dom lío

nifty dom mess http://meodai.ch//nifty.png nifty dom mess

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. Hay un complemento jQuery que maneja sombras en cajas y fuentes: http://dropshadow.webvex.limebits.com/

Mi conclusión : si estoy haciendo un pequeño trabajo de presupuesto, los usuarios de IE solo tienen bordes y no 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.

PD: los usuarios de IE están acostumbrados a las interfaces feas, no van a ver que las esquinas y las sombras se pierdan de todos modos: P

Answer 5

Este es mi método, utilizo los condicionales para dirigir los archivos CSS a 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 llegue a tu página, insertará la condición css que configuraste. 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.

Entonces tu 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, tendrías esta definición para tu 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 archivo ie.css, y porque está referenciado en su segundo, la definición caerá en cascada para que pueda modificarla 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 espacio adicional suficiente 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.

Los beneficios de pareja a este método incluyen:

• Solo 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 codificaste los gráficos de las esquinas redondeadas que vería cada navegador, tus usuarios de Firefox y Safari no necesitarán golpear el servidor con llamadas de imágenes adicionales.
• No es necesario agregar otro complemento de JavaScript que compruebe la existencia de IE, cree un nuevo marcado, tiempo, etc.

Answer 6

Hay un plugin jquery que modifica el DOM para producir esquinas redondeadas. Compruébalo aquí:

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

Aquí se muestra la página de ejemplo 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.

Answer 7

He estado usando CSS3PIE, que es bastante fácil de implementar, simplemente agregue 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/

Answer 8

Para permitir una degradación elegante, apuesto a que debe usar este script llamado CssUserAgent de http://www.cssuseragent.org/

Answer 9

para la sombra paralela en el uso de IE:

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

para esquinas redondeadas use DD_roundies como se menciona a continuación, ¡solo 9Kb es un buen compromiso para tener una esquina redonda en un segundo! ;-)

por supuesto, para programmatically IE-specific features utilice comentarios condicionales ! ;-)

Answer 10

Nifty Corners Cube produce buenos resultados y se supone que es compatible con versiones anteriores hasta IE5.5.