Crear sombras con box-shadow en CSS3

3min

Aunque ya hemos hablado de cómo aplicar sombras shadow en css3 y otros efectos a los textos con el atributo text-shadow de CSS,  nos centramos ahora en box-shadow, otro atributo de CSS que nos permite sombrear elementos de una manera sencilla, ahorrando tiempo y haciendo las páginas más ligeras.

Índice

Elementos del atributo box-shadow

Este requiere varios valores para determinar las propiedades de la sombra,  difuminado, color y separación de la sombra y la propia caja.

box-shadow: 5px -9px 3px #000;

Analicemos los valores por orden de aparición:

  1. Desplazamiento horizontal de la sombra (5px). Desplazará la sombra 5 píxeles a la derecha. Si queremos desplazarla a la izquierda, deberemos darle un valor negativo a este atributo.
  2. Desplazamiento vertical de la sombra (-9x). Desplazará 9 píxeles la sombra hacia arriba del elemento que la produce. En caso de que el valor sea positivo, el desplazamiento de la sombra será hacia abajo.
  3. Difuminado (3px).El difuminado de la sombra nos lo da el tercer valor. Si pusiéramos un cero, ésta aparecería totalmente nítida. En el ejemplo, el difuminado tendría 3 píxeles de anchura.
  4. Color. Para finalizar, el último atributo es el que nos indicará el color que tendrá la sombra. Generalmente, las sombras tienen un color negro o grisáceo, aunque podremos poner el color que consideremos oportuno. En el ejemplo, hemos optado por un color negro.

Compatibilidad con diferentes navegadores

Los últimas versiones de los navegadores ya tienen implementadas las funcionalidades de box-shadow, pero si utilizas versiones antiguas o simplemente quieres darle compatibilidad a cualquier versión, tendrás una ligera variación a la hora de escribirlos.

En navegadores basados en Mozilla (Firefox), para que el atributo box-shadow sea interpretado correctamente tendríamos que escribir -moz-box-shadow. Por ejemplo:

-moz-box-shadow: 1px 2px 0px #085;

Para navegadores basados en WebKit, como Safari o Google Chrome, tendríamos que escribir el atributo -webkit-box-shadow. Por ejemplo:

-webkit-box-shadow: 3px 5px 1px #fc9;

Aparte de estos dos, y para que tenga toda la compatibilidad, deberíamos de escribir el propio atributo box-shadow.

Algunos ejemplos de sombras con CSS3

A continuación, os mostramos algunos ejemplos con su correspondiente compatibilidad para navegadores Mozilla o WebKit.

  • Sobre un fondo gris, la sombra se desplaza en 4 píxeles a la derecha y otros tantos hacia abajo. En esta ocasión no hay ningún tipo de difuminado (0). 
    #boxshadow{
 background-color: #eee;
 width: 310px;
 padding: 12px;
box-shadow: 4px 4px 0 #333;
 -webkit-box-shadow: 4px 4px 0 #333;
 -moz-box-shadow: 4px 4px 0 #333;
 }
  • Disminuimos la sombra respecto al anterior, en el que también se desplaza hacia abajo y a la derecha. Además, la hemos difuminado con 3 píxeles y le hemos puesto un color rojo. 
    #lightShadow{
 width: 210px;
 padding: 12px;
 background-color: #7b7b7b;
 color: #fff;
box-shadow: 3px 3px 3px # ff0000;
 -webkit-box-shadow: 3px 3px 3px # ff0000;
 -moz-box-shadow: 3px 3px 3px # ff0000;
 }
  • A diferencia de los anteriores ejemplos, aquí hemos aplicado  en la sombra un efecto redondeado para las esquinas con border radius, otro atributo del que ya hablamos en diferentes artículos. Además, también funciona con navegadores con compatibilidad a sombras y CSS 3. 
    #roundedShadow{
 background-color: #090;
 color: #fff;
 width: 412px;
 padding: 12px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
box-shadow: 14px -11px 3px #000;
 -webkit-box-shadow: 14px -11px 3px #000;
 -moz-box-shadow: 14px -11px 3px #000;
 }
Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: