En este Taller de CSS vamos a trabajar con sombras sobre textos, pero realizados solamente con CSS y sin recurrir a programas de edición gráfica, como podría ser Photoshop.

Podéis ver, por la fecha de publicación de este artículo, que las técnicas que vamos a presentar ya tienen un tiempo. En el momento en que se escribió fue un trabajo interesante de investigación. Hoy todavía funcionan las técnicas, pero existen modos más interesantes de conseguir los resultados de sombras en CSS.

Se verán 3 métodos distintos para hacer un efectos de sombra. Son los siguientes:

1. Método background-color
2. Método canal alpha
3. Método estirar imagen

Método Background color

Este método es bastante simple. Se basa en definir tres cajas trasladadas, con diversos colores de fondo. Los elementos con las clases "blur" y "shadow" se definirán con tonos grisáceos para crear el efecto de sombreado.

Código HTML:

<div class="blur">
<div class="shadow">
<div class="content">bla bla</div>
</div>
</div>

Código CSS:

.blur{
   background-color: #ccc; /*shadow color*/
   color: inherit;
   margin-left: 4px;
   margin-top: 4px;
}

.shadow,
.content{
   position: relative;
   bottom: 2px;
   right: 2px;
}

.shadow{
   background-color: #666; /*shadow color*/
   color: inherit;
}

.content{
   background-color: #fff; /*background color of content*/
   color: #000; /*text color of content*/
   border: 1px solid #000; /*border color*/
   padding: .5em 2ex;
}

La única desventaja de este método es que usa colores definidos para las sombras y ello puede dar lugar a que no se pueda mezclar este efecto con otros elementos. Con un fondo blanco, las sombras en grises quedan bien, pero pongamos el caso de que el fondo de la página fuera de color rojo. Entonces el efecto de sombreado debería realizarse con tonos rojos oscuros.

Podemos ver el ejemplo en funcionamiento en una página aparte.

Método canal alpha

Este método es muy parecido al anterior, pero soluciona el problema de mezclarse con otros elementos. Es indiferente cual sea el fondo de la página donde se va a mostrar el elemento sombreado, incluso si el sombreado se realiza en la misma página sobre distintos fondos. Utiliza imágenes de fondo en formato PNG "alpha transparentes", en lugar de colores definidos en la hoja de estilo.

El código HTML necesario es el mismo que para el ejemplo anterior, simplemente debes modificar el código CSS, en concreto para las clases "blur" y "shadow". Mostramos el código CSS para este ejemplo.

<style type=text/css>
.blur{
   background: transparent url(shadow1.png);
/*ruta para el 80%-transparente 1x1 pixel coloreado de negro */
   color: inherit;
   margin-left: 4px;
   margin-top: 4px;
}

.shadow{
   background: transparent url(shadow2.png);
/*ruta para el 60%-transparent 1x1pixel coloreado de negro */
   color: inherit;
}

.shadow,
.content{
   position: relative;
   bottom: 2px;
   right: 2px;
}

.content{
   background-color: #fff; /*background color of content*/
   color: #000; /*text color of content*/
   border: 1px solid #000; /*border color*/
   padding: .5em 2ex;
}
</style>

Para probar la ventaja de este tipo de fondo, podemos cambiar el color de fondo de la página web y veremos como la sombra también cambia de color.

Las dos imágenes, de 1x1 pixel medio transparentes que se necesitan para componer este ejemplo están aquí:

Pulsar para descargar imagenes-transparentes.zip

Podemos ver el ejemplo en funcionamiento en una página aparte .

Método estirar imagen

Opino que los dos métodos anteriores no son demasiado buenos, debido a que la sombra no parece muy natural. Dicho de otro modo, no resulta un efecto suficientemente realista. De modo que abro mi editor gráfico, creo una caja rectangular con efecto de sombra y lo exporto a una imagen. Posiblemente pueda utilizar esa imagen para crear el efecto de sombra.

El código HTML experimental

<div class="shade">
<img src="shadow.png" width="0" height="0" alt="" class="shade" />
bla bla</div>

El código CSS experimental

img.shade{
   width: 37ex;
   height: 9em;
/* specify the dimension of the image */
   display: block;
   position: absolute;
   z-index: -1;
/* force the image to show below the content */
   right: -3ex;
   bottom: -1em;
}

div.shade{
   width: 30ex;
   height: 6em;
/* specify the dimension of the content, slightly smaller than the image */
   position: relative;
   z-index: 1;
/* force the content to show above the image */
   background-color: #fff;
   border: 1px solid #000;
   padding: 1em 2ex;
   margin-right: 6ex;
   margin-bottom: 3em;
}

Tenemos tres desventajas en este método

1. Como la imagen se estira, puede que no quede muy bonito.
2. En Mozilla Firefox la imagen a veces desaparece (se puede recuperar refrescando o desplazando la página). En Internet Explorer no se muestra bien el efecto, por lo menos en la versión 6.
3. El contenido no puede flotar (no podemos utilizar el atributo float)

Podemos obtener la imagen para hacer el ejemplo.

Podemos ver este ejemplo en marcha en una página aparte.

Un momento. ¿Cómo haríamos texto con sombreado?

Si utilizas un navegador basado en Gecko, podrías visualizar otro efecto interesante para realizar sombreado de textos sin utilizar imágenes y redimensionable simplemente cambiando el tamaño del texto o las fuentes que usa el navegador (con el menú view>text size > increase / Decrease).

El código HTML sería el siguiente:

<span id="text">Texto sombreado</span>

El código CSS

#text{
   font-size: 3em; /* optional. just to increase the font size. */
   display: block;
   line-height: 1em;
   color: #666; /* shadow color */
   background-color: transparent;
   white-space: nowrap; /* wrapping breaks the effect */
}

#text:before,
#text:after{
   content: "Texto sombreado"; /* El mismo texto que queramos mostrar sombreado */
   display: block;
}

#text:before{
   margin-bottom: -1.05em;
   margin-left: 0.1ex;
   color: #ccc; /* shadow color */
   background-color: transparent;
}

#text:after{
   margin-top: -1.05em;
   margin-left: -0.1ex;
   color: #fff; /* text color */
   background-color: transparent;
}

Este efecto puede ser útil por ahora. Sin embargo, las especificaciones de CSS2 incluyen una propiedad CSS llamada text-shadow, que sirve para definir un efecto de sombra a un texto. Sin embargo, la mayoría de los navegadores todavía no soportan esta propiedad. Actualizado: Al actualizar estas líneas estamos en agosto de 2011 y la propiedad text-shadow ya se encuentra disponible en muchos de los navegadores más habituales. Lo cierto es que esa regla de estilos no se llegó a implementar en casi ningún browser en la etapa CSS2. Sin embargo, ahora que las CSS3 están implementadas en gran medida en los browsers más habituales, la propiedad text-shadow está disponible en la mayoría de casos.

Interesantes recursos sobre este tema:

• Simple CSS drop shadows http://www.saila.com/usage/shadow/
• A List Apart: CSS Drop Shadows http://alistapart.com/articles/cssdropshadows/ de Sergio Villarreal (revisión del artículo Easy CSS drop shadows http://1976design.com/blog/archive/2003/11/14/shadows/ de Dunstan Orchard)
• CSS Drop Shadows II: Fuzzy Shadows http://alistapart.com/articles/cssdrop2/ by Sergio Villarreal

Este artículo es una traducción del inglés. El original está en: http://www.phoenity.com/newtedge/drop_shadow/