Sombras con CSS

En este documento veremos varias técnicas para incluir sombras de texto en nuestros documentos usando CSS.

La propiedad text-shadow

En primer lugar debemos indicar que CSS incluye una propiedad específica para indicar que un texto tenga una zona sombreada alrededor: la propiedad text-shadow. Sin embargo, los navegadores más usados actualmente no soportan esta propiedad. Es de esperar que en próximas versiones ya la soporten. Por eso, consideramos conveniente incluir una descripción de esta propiedad.

Esta propiedad puede aplicarse a cualquier elemento, y solo es aplicable en medios visuales. Esta propiedad acepta una lista separada por comas de efectos de sombra para ser aplicados al texto del elemento. Es decir, un mismo elemento puede tener varias sombras, de distintos colores y situadas en distintos lugares. Los distintos efectos de sombra son aplicados en el orden especificado y por eso pueden cubrirse unos a otros, pero nunca cubrirán al propio texto. Los efectos de sombra no alteran el tamaño de una caja, pero pueden extenderse más allá de sus límites. El nivel en la pila de los efectos de sombra es el mismo que el del elemento.

Tenemos, por tanto, que podemos indicar uno o varios efectos de sombra, cada uno de ellos separados por comas. Cada uno de los efectos de sombra constará de dos o tres valores de medida y opcionalmente una indicación de color. Sin embargo, estos valores no deben ir separados por comas, sino por espacios. Es decir, las comas se utilizarán para separar un efecto de otro, pero dentro de cada efecto no se usan las comas.

Cada efecto de sombra debe especificar un desplazamiento de la sombra y puede especificar opcionalmente un radio de desenfoque y un color para la sombra. El desplazamiento de la sombra se indica con dos valores de <medida> que determinan la distancia con el texto. El primer valor especifica la distancia horizontal a la derecha del texto. Un valor horizontal negativo coloca la sombra a la izquierda del texto. El segundo valor especifica la distancia vertical hacia abajo del texto. Un valor vertical negativo coloca la sombra por encima del texto.

Se puede indicar opcionalmente un radio de desenfoque después del desplazamiento de la sombra. El radio de desenfoque es el valor de la medida que indica los límites del efecto de desenfoque. En principio, el algoritmo exacto para computar el efecto de desenfoque no está determinado en las especificaciones de CSS, por lo que cada navegador podría usar un algoritmo distinto.

También puede especificarse opcionalmente un valor de color antes o después de los valores de medida del efecto de sombra. El valor del color será usado como la base del efecto de sombra. Si no se especifica ningún color, el valor de la propiedad 'color' del elemento será usado en su lugar.

Ejemplos:

Si ponemos el siguiente código:

       h1 { text-shadow: 0.2em 0.2em }

aparecerá una sombra a la derecha y abajo del texto del elemento, a una distancia de 0.2 em. Como no se ha especificado ningún color, la sombra tendrá el mismo color del elemento, y como no se ha especificado ningún radio de desenfoque, la sombra del texto no será desenfocada.

En el siguiente ejemplo:

       h2 { text-shadow: 3px 3px 5px red }

se coloca una sombra a la derecha y abajo del texto de un elemento. La sombra tendrá un radio de desenfoque de 5px y será roja.

En el siguiente ejemplo se especifica una lista de efectos de sombra. La primera sombra estará a la derecha y abajo del texto del elemento y será roja sin desenfoque. La segunda sombra cubrirá al primer efecto de sombra, y será amarillo, desenfocado, y colocado a la izquierda y abajo del texto. El tercer efecto de sombra será colocado a la derecha y abajo del texto. Como no se ha especificado ningún color de sombra para el tercer efecto, el valor de la propiedad 'color' del elemento será usado:

       h2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

El ejemplo final que aparece en los manuales del w3c es el siguiente:

       span.glow {
                background: white;
                color: white;
                text-shadow: black 0px 0px 5px;
                }

Aquí, las propiedades 'background' y 'color' tienen el mismo valor, con lo que el texto no se vería (se escribe en blanco sobre fondo blanco). La propiedad 'text-shadow' se usa sin desplazamientos pero con un desenfoque de 5 puntos. Se consigue así crear un efecto de "eclipse solar":

Truco para conseguir sombras

Mientras no funcione esta propiedad (actualmente funciona en Safari y Konqueror) podemos usar un pequeño pero efectivo truco consistente en utilizar la propiedad de poscionamiento, situando el mismo texto a ensombrecer en 2 contenedores diferentes (capas) y posicionarlas próximas pero no solapadas.

El código que usaremos es el siguiente:

    <div class="resultado"> <div style="position: relative">
        <span style="position: relative; color: blue; font: 20pt arial">
            Texto sin sombra
        </span>
    </div>


    <div style="position: relative">
        <span style="position: absolute;
                        font: 20pt arial;
                        top: 2px; left:2px;
                        color: gray">
            Texto con sombra
        </span>
        <span style="position: relative; color: blue; font: 20pt arial">
            Texto con sombra
        </span>
    </div>

Obteniendo el siguiente resultado:

El problema de esta solución es que nos obliga a escribir dos veces el texto, pero funciona bien en la mayoría de navegadores. Además de los capas contenedoras del texto, se ha utilizado un contenedor <div> que englobe a las dos capas de texto. Esto se hace así para posicionar correctamente el conjunto dentro de la página. Combinado esta técnica con otras posibilidades de CSS se pueden obtenerse títulos de gran impacto sin tener que incluir imágenes. Además la variación para posteriores usos es inmediata.