Sombras

Antes de la llegada de CSS3, la generacin de sombras se hacia por medio de la insercin de imagenes para simular dicho efecto. Con esta ltima versin de CSS, disponemos de un potente atributo llamado boxshadow que nos permite la creacin de sombras directamente desde el codigo CSS, y aplicarlo a cualquier elemento de nuestro documento. Aqu vamos a ver:

Generacin de Sombras Efecto de Resplandor Exterior Ejemplos de sombras

Generacin de sombras
Uno de los efectos ms requeridos por los diseadores en los ltimos tiempos, es el de poder crear sombras del tipo drop-shadow en cualquier elemento del documento HTML. Y esto es posible con CSS3.

El atributo de CSS para crear una sombra es box-shadow que posee 4 parmetros.

? box-shadow: 2px 2px 5px #999; En orden de aparicin serian:

- Desplazamiento horizontal de la sombra La sombra de un elementos por lo general est desplazada del elemento mismo, dependiendo del ngulo de la fuente de luz que lo ilumine. En este ejemplo, el valor es de 2px, lo que indica que estar desplazada 2 pixeles a la derecha del elemento. Si quisiremos que estuviera desplazada hacia la izquierda, deberamos colocar el valor negativo (-2px) - Desplazamiento vertical de la sombra En este ejemplo, el valor es de 2px, lo que indica que la sombra estar desplazada 2 pixeles hacia abajo del elemento. Si quisiremos que estuviera desplazada hacia arriba, deberamos colocar el valor negativo (-2px) - Difuminado Este valor indica cuanto queremos que est difuminado el borde mismo de la sombra, si el mismo fuera cero, indicara que la sombra est totalmente definida. Si colocamos un valo de 5px como en este ejemplo, indicaramos que la sombra este difuminada con un ancho en 5 pixeles. - Color de la sombra Por ultimo, el cdigo de color de la sombra. En el ejemplo crearemos una clase que aplica una sombra negra ubicada abajo a la derecha y difuminada en 5 pixeles:

? .elemento{ box-shadow: 2px 2px 5px #999; } No obstante, esta regla debe ser

modificada para que funcione en los navegadores actuales. SAFARI, FIREFOX y CHROME En el Safari 3 y Chrome, la sintaxis correcta de la propiedad, es:

? -webkit-box-shadow Y en el Firefox ? -moz-box-shadow INTERNET

3.1, la sintaxis correcta de la propiedad, es:

EXPLORER

El navegador Internet Explorer, tiene un mecanismo propio para generar sombras que se basa en el uso de filtros , y los mismos se utilizan para operaciones complejas en los elementos del documento. La sintaxis habitual para el filtro de sombra del navegador Internet Explorer, es la siguiente:

? filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666, Direction=45, Strength=4); - color, establecido mediante el formato hexadecimal (ejemplo: #666666).

- direction, direccin hacia la que se desplaza la sombra. Su valor se indica en

grados y slo se permiten los valores 0, 45, 90, 135, 180, 225, 270 y 315. - strength, distancia en pxeles hasta la que se extiende la sombra.

CODIGO FINAL (Firefox, Safari y Internet Explorer) Entonces la regla final de CSS que incluye la sombra en los 3 navegadores, es la siguiente:

? .elemento { -webkit-box-shadow: 2px 2px 5px #000000; -moz-box-shadow: 2px 2px 5px #000000; filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=4); } Esta clase elemento que hemos creado, la podemos aplicar a cualquier

elemento dentro del documento HTM y asi obtener un efecto de sombra sin tener que utilizar imgenes de fondo, con lo que reducimos considerablemente el tiempo de carga del documento. En el ejemplo siguiente, he creado una caja (DIV) de color verde, con texto de ejemplo, donde le apliqu la clase que creamos anteriormente.

SOMBRA INTERIOR (inset) Esta funcionalidad acepta un atributo adicional llamado inset que sirve para generar la sombra hacia adentro del elemento. Esto es muy util por ejemplo, para generacin de efectos en botones o efectos de hundidos.

Esta modificador se coloca antes de los parametros:

? 1.elemento {

2-webkit-box-shadow: inset 0px 0px 5px #000000; 3-moz-box-shadow: inset 0px 0px 5px #000000; 4} En este caso no colocado desplazamiento vertical ni horizontal para que la sombra (hundida) quede centrada. Aqui el ejemplo:

Resplandor Exterior
Unas de las consultas que mas se hacen es como crear un resplandor exterior, alrededor de un elemento, generalmente, un DIV. Si lo analizamos, un resplandor exterior no es mas que una sombra, pero con un color claro, y que no est desplazada ni horizontal, ni verticalmente. Obviamente para representar este efecto, debemos trabajar sobre un fondo oscuro. Utilizando la misma propiedad box-shadow que utilizamos anteriormente, podemos realizar el siguiente ejemplo de resplandor:

Lo que hice aqu fue crear una DIV llamado caja donde le aplique el atributo box-shadow con desplazamiento cero, y con color verde. Ademas, coloqu un color negro de fondo de HTML con padding general, un color gris oscuro de fondo de DIV y un borde verde. Aqu el cdigo completo:

? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sombras CSS3</title> <style type="text/css"> #caja { color: #FFF; padding: 10px; height: 200px; width: 200px; background-color: #333; border: 1px solid #A3FF0F; -moz-box-shadow: 0px 0px 30px #A3FF0F;; -webkit-box-shadow: 0px 0px 30px #A3FF0F;; box-shadow: 0px 0px 30px #A3FF0F; } body { background-color: #000; padding: 20px; } </style> </head> <body> <div id="caja">Texto de ejemplo.</div> </body> </html> Puedes ver aqu el ejemplo:

Ejemplos de Sombras
Aqu veremos algunos ejemplos interesantes en la creacin de sombras con CSS3. He creado 3 divs o cajas, con 3 efectos de sombras diferentes.

El primero, es una caja gris, con texto negro y con una sombra dura, tambin de color negro.

? #sombradura{

background-color: #ddd; width: 300px; padding: 10px; box-shadow: 5px 5px 0 #333; -webkit-box-shadow: 5px 5px 0 #333; -moz-box-shadow: 5px 5px 0 #333; } El segundo ejemplo, es una caja gris

con texto blanco y con una sombra clara de

#sombraclara{ width: 200px; padding: 10px; background-color: #999; color: #fff; box-shadow: 2px 2px 2px #ffc; -webkit-box-shadow: 2px 2px 2px #ffc; -moz-box-shadow: 2px 2px 2px #ffc; } Y el tercero, es una caja verde, con sombra negra

color amarillo. ?

#sombraredondeada{ background-color: #090; color: #fff; width: 400px; padding: 10px; -moz-border-radius: 7px; -webkit-border-radius: 7px; box-shadow: 15px -10px 3px #000; -webkit-box-shadow: 15px -10px 3px #000; -moz-box-shadow: 15px -10px 3px #000; } Aqu el cdigo final del documento HTML: ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejemplos de sombras</title> <style type="text/css"> #sombradura{ background-color: #ddd; width: 300px; padding: 10px; box-shadow: 5px 5px 0 #333; -webkit-box-shadow: 5px 5px 0 #333; -moz-box-shadow: 5px 5px 0 #333; } #sombraclara{ width: 200px; padding: 10px; background-color: #999; color: #fff; box-shadow: 2px 2px 2px #ffc; -webkit-box-shadow: 2px 2px 2px #ffc;

difuminada, desplzada hacia arriba. La caja y la sobra tienen redondeados los bordes por medio del atributo borderradius que podrs ver en la seccin Bordes. ?

-moz-box-shadow: 2px 2px 2px #ffc; } #sombraredondeada{ background-color: #090; color: #fff; width: 400px; padding: 10px; -moz-border-radius: 7px; -webkit-border-radius: 7px; box-shadow: 15px -10px 3px #000; -webkit-box-shadow: 15px -10px 3px #000; -moz-box-shadow: 15px -10px 3px #000; } body { background-color: #CCC; } </style> </head> <body> <div id="sombradura">Sombra dura.</div> <br /> <br /> <div id="sombraclara">Sombra clara. </div> <br /> <br /> <div id="sombraredondeada">Sombra desplazada y redondeada. </div> </body> </html> Ejemplo online y descargas: