Muchos de los sitios web utilizan en sus diseños sombras, algo que curiosamente no permite css2 o lo permite en pocos navegadores. Para solucionar este problema debíamos utilizar imágenes que hicieran una suerte de sombra. Pero con css3 la cosa es mucho más fácil.
La propiedad box-shadow nos permite crear sombras en los elementos como por ejemplo los div. Esta propiedad recibe cuatro valores.
- Coordenada X en píxeles Si el valor es mayor a 0px dibujará una sombra a la derecha. En caso de que el valor sea menor a 0px la sombra irá a la izquierda.
- Coordenada Y en píxeles también. Si el valor es mayor a 0px la sombra irá hacia abajo del elemento. Pero si el valor es menor a 0px la dibujará hacia arriba.
- Nivel de suavizado. En píxeles, cuanto más grande sea el valor más efecto de sombreado le dará al elemento.
- Color de la sombra.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Aca va el titulo de la pagina</title>
<style type="text/css">
#caja_con_sombra {
width: 100px;
height: 100px;
border: solid 1px #000;
box-shadow: 5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
}
</style>
</head>
<body>
<div id="caja_con_sombra"></div>
</body>
</html>
Las propiedades -moz-box-shadow y -webkit-box-shadow son para que funcione en Firefox y Safari.
Otra posibilidad que nos da css3 es ponerle sombras a los textos. Para ello debemos usar la propiedad text-shadow que recibirá los mismos valores que box-shadow.
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Aca va el titulo de la pagina</title>
<style type="text/css">
#texto_con_sombra {
text-shadow: 1px 1px 10px #000;
}
</style>
</head>
<body>
<p id="texto_con_sombra"> Este es un texto con sombra. </p>
</body>
</html>