Inicio / Desarrollo web / CSS: Cajas con sombra para todos los navegadores usando box-shadow + Shadow Filter

CSS: Cajas con sombra para todos los navegadores usando box-shadow + Shadow Filter

Vamos a ver cómo conseguir un interesante efecto de sombra usando solamente CSS. En el ejemplo aplicaremos la sombra a un div, pero este efecto se puede usar prácticamente con cualquier elemento HTML, como imágenes, tablas, formularios, etc.

box-shadowAunque para las versiones actuales de todos los navegadores solo sería necesario usar la propiedad estándar “box-shadow“, para lograr la compatibilidad con todos los navegadores y sus versiones, vamos a utilizar 5 propiedades distintas.

Las dos primeras son necesarias para versiones anteriores de Mozilla Firefox y de navegadores basados en WebKit, como Safari y Google Chrome. La tercera propiedad es la estándar de CSS 3, válida para Opera y para todos los navegadores actuales. Las dos últimas son filtros específicos de Microsoft (Shadow Filter) y son necesarias para antiguas versiones de Internet Explorer.

.shadow {
    -moz-box-shadow: 3px 3px 4px #111;
    -webkit-box-shadow: 3px 3px 4px #111;
    box-shadow: 3px 3px 4px #111;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111')";
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');
}

Para usar este efecto en nuestro sitio web podemos añadir la clase anterior a la hoja de estilos (.css) y usar el atributo “class” en cualquier elemento al que le queramos aplicar una sombra:

<div class="shadow">Ejemplo de div con sombra</div>

En caso necesario, también podemos declarar los estilos directamente sobre el elemento, usando el atributo “style”:

<div style="-moz-box-shadow: 3px 3px 4px #111; -webkit-box-shadow: 3px 3px 4px #111; box-shadow: 3px 3px 4px #111; -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#111111)'; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');">
Ejemplo de div con sombra
</div>

Ejemplo

Ejemplo de div con sombra

Por supuesto puedes cambiar los valores de la sombra para que quede a tu gusto, sin olvidar que tendrás que hacer los cambios en todas las propiedades, intentando que la sombra sea similar en los distintos navegadores.

Valores de box-shadow

  1. Desplazamiento de la sombra sobre el eje X. Relativo al elemento; puede tomar valores negativos. (Ejemplo: 3px)
  2. Desplazamiento de la sombra sobre el eje Y. Relativo al elemento; puede tomar valores negativos. (Ejemplo: 3px)
  3. Cantidad de efecto blur de la sombra. (Ejemplo: 4px)
  4. Color de la sombra. (Ejemplo: #111)

Atributos de Shadow Filter

  1. Extensión de la sombra, en píxeles. (Ejemplo: Strength=4)
  2. Dirección de la sombra, en grados. Sólo puede tomar los valores: 0, 45, 90, 135, 180, 225, 270, 315. (Ejemplo: Direction=135)
  3. Color de la sombra (Ejemplo: Color=’#111111′)

Acerca de MasterGeek

José Antonio Ramírez # Ingeniero Técnico en Informática de Gestión # Fundador y administrador de nGeeks.com # Market Analyst en SocialRep

También puedes ver...

Iconos de acceso rápido mediante teclado

Los iconos de acceso rápido son los iconos que aparecen en la barra de tareas …

13 Comentarios

  1. Hola, gracias por el post, pero en el IE8 la fuente es la que queda con sombra y no el div. Alguna solución? Gracias otra vez.

  2. gracias pero la sombra se generan tambien para los div que estan dentro d otros div y eso no quiero solo para el div general como lo puedo solucionar???

  3. Man una pregunta y para hacer los bordes como hago uso tb
    -ms-border radius:10 px;???

  4. Christian Campos

    Excelente post.. me sirvio bastante… gracias

  5. Buenos días. El efecto conseguido es muy interesante, aunque su compatibilidad no lo es tanto.

    En Internet Explorer 8, sucede algo curioso y es que todo el contenido del div al que se le aplica la clase shadow, aparece con sombra, exptuando las imágenes.

    La verdad, es que es motivo más que suficiente para no usar el código propuesto ya que no es admisible dejar a los usuarios de Internet Explorer de lado, más allá de nuestras preferencias.

    He buscado información acerca de los filtros para Internet Explorer, y he probado algunas combinaciones, sin éxito.

  6. A mi me ocurre lo mismo que comenta Julio con el explorer, alguien tiene conoce alguna solucion ?

  7. No se si es exactamente lo que buscan pero existe algo llamado
    CSS3 PIE

    Me ayudo haciendo que los border-radius funcionaran en internet explorer 8 para un projecto

    http://css3pie.com/

  8. Si os sale la sombra en el contenido tb, probad a ponerle un fondo al div, color o imagen.
    A mí me funciona.

  9. Excelente, gracias!

  10. Consulta, se que en mozilla y otro navegadores para la sombra interna se utiliza inset, pero para IE cual se utiliza??

    Saludos.

  1. Pingback: Bitacoras.com

Deja un comentario

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