Bordes redondeados y más características de CSS3 en IE 6,7 y 8

CSS3 en IE 6,7 y 8, Los bordes redondeados son un recurso de diseño que está de moda desde hace tiempo, tanto que la versión 3 de CSS los incorpora de forma estandar. Claro que, si estamos obligados a que nuestra web funcione en versiones de Explorer anteriores a la 9 (lo que sucede, por desgracia, en la mayoría de los casos), tenemos que olvidarnos de CSS3, ya que estos navegadores difícilmente cumplen con CSS2 (y mejor no hablar de la pesadilla de IE6). Hasta ahora, porque gracias a CSS Pie podemos usar algunas características de CSS3 en estos navegadores, ¡Incluso en IE6!, de forma gratuita. Usarlo es, teóricamente, tan sencillo como subir un archivo de apenas 40k llamado PIE.htc, y llamarlo desde el CSS para cada elemento al que queramos aplicarle características de CSS3. Las características disponibles con CSS Pie son:

  • border-radius
  • box-shadow
  • border-image
  • multiple background
  • linear-gradient

Para instalarlo, basta con bajarse el fichero PIE.htc, y ponerlo en alguna carpeta de nuestra web. Y para aplicar el estilo mediante CSS procedemos así:

#capa_con_efectos {
 -webkit-border-radius: 13px
 -moz-border-radius: 13px;
 border-radius: 13px;

 -webkit-box-shadow: #aaa 1px 1px 6px;
 -moz-box-shadow: #aaa 1px 1px 6px;
 box-shadow: #aaa 1px 1px 6px;

 behavior: url(css/PIE.htc);
}

En este ejemplo hemos aplicado border radius y box-shadow para hacer una capa con bordes redondeados y sombra. Es importante tener en cuenta que la ruta del fichero PIE.htc tiene que ser relativa al HTML principal, no al CSS (cosas de Explorer…). Otra cosa curiosa es que el border-radius no funciona sin el box-shadow en Explorer, no me preguntéis por qué.

¿Te ha gustado el artículo?
Sé el primero en calificar esta publicación.
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

3 Comentarios

Jose Luis

Pueden utilizar jquery para los bordes, es muy bueno, lo utilizo y me funciona al 100% http://jquery.malsup.com/corner/

Matt - Astoria Gym

Lementablemente no queda otra que seguir usando imagenes, o  no se si hay otra forma. Pues la gran masa de clientes siguen usando IE. Me ha pasado varias veces, que diseño y cuando quiero verlo en IE los bordes se ven todos cuadrados.

codigonexo

Codigonexo Blog: Bordes redondeados y más características de CSS3 en IE 6,7 y 8, http://t.co/VXkc5B79 #css #desarrollo #html