Un efecto de moda muy fácil de lograr, son las sombras en varios elementos web, desde menús [menúes (?)], divisiones (divs), imágenes, slideshows, etc. Muchos se pueden lograr con la facilidad de una imagen que ya tenga la sombra, pero para los que les gusta hacer todo desde Notepad o no son muy habilidosos en programas de diseño, hay otra opción, además que es mucho más efectiva en ciertos casos, por la misma razón de no tener que cargar una imagen.

Antes de empezar, quiero aclarar que este efecto NO se podrá ver en IE7, IE8, sólo se podrá ver en IE9 , así que todas aquellas personas que pensaban poder hacerlo con IE7 u IE8 así de sencillo no van a poder.

Sombras en un div

Para lograr las sombras se necesita de varios elementos, primero la propiedad “box-shadow:“, y sus diferentes propiedades para los diferentes navegadores, como por ejemplo en Chrome se deberá usar: “-webkit-box-shadow:” o en Firefox: “-moz-box-shadow:” y esto  lo asignamos a una clase.

Esta propiedad tiene la siguiente sintaxis:

box-shadow: 4px 5px 6px 7px #ccc;

  1. El “4px” se refiere al desvió o cuantos pixels se moverá la sombra en el eje X (horizontalmente), si el número es positivo, se moverá a la derecha, si el número es negativo se moverá a la izquierda.
  2. El siguiente elemento “5px” será cuantos pixels se moverá en el eje Y (verticalmente), si el número es positivo, se moverá hacia abajo, y si es negativo, hacia arriba.
  3. El “6px” se refiere al “blur”, el desenfoque de esa sombra (este elemento es opcional). Entre más grande el número, más desenfocado o borroso.
  4. El “7px” se refiere al tamaño de la sombra, entre más positivo sea el número, más borroso.
  5. Por último tenemos el color.

 Ejemplos

box-shadow: 2px 4px 10px 3px #ccc;
-moz-box-shadow: 2px 4px 10px 3px #ccc;
-webkit-box-shadow: 2px 4px 10px 3px #ccc;
Esta sombra se puede observar desde todos los navegadores, excepto IE7,8.         Sombra abajo y la derecha.

 

box-shadow: 0 6px 8px -6px black;
-moz-box-shadow: 0 6px 8px -6px black;
-webkit-box-shadow: 0 6px 8px -6px black;
Esta sombra se puede observar desde todos los navegadores, excepto IE7,8.         Sombra sólo de abajo.

¿Usarán esta nueva técnica para crear sombras?

Para saber como pudimos crear esas esquinas redondeadas con CSS, pueden leerlo aquí.