Utilizando CSS3 hoy (3): Sombras

Seguimos con propiedades de CSS3 que podemos utilizar hoy en nuestras web, siempre teniendo en cuenta que son propiedades no soportadas por Internet Explorer. Hoy vamos a ver las sombras.

Text-shadow

En primer lugar vamos a ver text-shadow, que permite aplicar sombras a textos. Actualmente lo soportan Safari, Chrome, Opera y Firefox 3.5. Su sintaxis es:

Veamos un ejemplo:

Supongamos que tenemos un texto al que le aplicamos estos estilos:

p {
   text-shadow: 3px 3px 4px #666;
   font-size: 24px; 
}

El resultado es:
shadow1

Tenemos una sombra de 3px a la derecha, 3px hacia abajo, 4px de desenfoque y con un color de sombra #666.

Hay que tener en cuenta que la utilización de text-shadow puede hacer que no se valide nuestra hoja de estilos respecto a las especificaciones de CSS 2.1, pero ¿es eso importante? Yo creo que no.

Podemos también utilizar rgba (que vimos en el anterior artículo) en vez del color en formato hexadecimal, es decir:

p {
   text-shadow: 3px 3px 4px rgba(0, 0, 0, .5);
   font-size: 24px; 
}

Por lo que en vez del gris #666 utilizamos un negro con una opacidad del 50%

Conviene jugar con las distintas combinaciones de valores de la sombra para conseguir los efectos más adecuados a lo que queremos. Podemos incluso lograr efectos de relieve interno:

p {
  text-shadow: 0px 1px 0 rgba(255,255,255, .5);
  font-size: 24px; 
  background-color: #ccc;
  color: #777;
  font-family: "Arial Black" sans-serif;
  padding: 10px;
}

shadow2

Box-shadow

Otro tipo de sombra que podemos aplicar es box-shadow, que en vez de aplicarse a un texto se aplica a cualquier elemento.

Su sintaxis es como la de text-shadow:

Veamos un ejemplo, con un elemento p dentro de un elemento div, aplicando una sombra al elemento div:

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<style type="text/css">
div {
	width: 300px;
	height: 60px;
	box-shadow: 3px 3px 4pc #ccc;
	-webkit-box-shadow: 3px 3px 4px #ccc;
	-moz-box-shadow: 3px 3px 4px #ccc;
	background-color: #eaeaea;
	border: 1px solid #ccc;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 10px;
}
p {
	color: #666;
	font-family: "Arial Black" sans-serif;
}
</style>
</head>
<body>
<div>
	<p>Este es un texto dentro de un DIV</p>
</div>
</body>
</html>

Vemos que hemos aplicado al elemento div una anchura de 300px, una altura de 100px, una sombra de 3px a la derecha, 3px hacia abajo, un desenfoque de 4px y un color de sombra #ccc. Vemos que hemos aplicado la instrucción box-shadow que hoy en día aún no está reconocida por los navegadores, por lo que más adelante hemos aplicado las específicas de webkit (Safari y Chrome) y Mozilla (Firefox). Además le hemos puesto un color de fondo #eaeaea, un borde de 1px sólido de color #ccc y bordes redondeados con un radio de 10px.

shadow5