Como ya sabemos CSS3 sólo esta soportado por los navegadores modernos y como todavia esta pendiente de su especificación final, sus nuevos atributos no están soportados de igual forma por todos estos navegadores.
Por lo tanto, para crear sombras en los distintos navegadores (los basados en Webkit como Safari y Chrome; basados en Mozilla; en Opera; y en Internet Explorer mediante filtros) lo hariamos de la siguiente forma:
.sombra{
box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc');
}
Este ejemplo nos creará una sombra de color gris (#ccc) desplazada hacia abajo y a la derecha.
box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc');
}
No hay comentarios :
Publicar un comentario