Sombras en HTML (Sin imágenes/CSS3)

La sombra puede que no sea una herramienta de diseño importante, pero en ocasiones aparece la necesidad de añadir "algo" al texto. Un ejemplo pueder ser colocar texto sobre una imagen, dependiendo de los colores de la imagen y el texto, sin una sombra el texto puede "perderse".
Cuando uno quiere poner sombras en HTML las opciones son bastante escasas:

• Se podría usar la propiedad text-shadow de CSS3, pero por los momentos esta opción sólo es soportada por Safari.


• Se podría usar el pseudo-elemento ":before" de CSS para duplicar el texto y simular la sombra, pero esto no funcionaría en Internet Explorer.


• Se podría usar un filtro de CSS propietario para que funcione en IE, pero eso sería una solución no estándar y además solo funcionaría en IE.

Si se usa una o varias de las opciones anteriores, la apariencia podría cambiar drásticamente en distintos navegadores. Por los momentos, un código de CSS estándar no nos dará la solución que queremos, pero un poco de manipulación del DOM es exactamente lo que necesitamos.

Primero, el código Javascript que permite que la magia ocurra:

function getElementsByClass(searchClass,tag) {
   var classElements = new Array();
   var els = document.getElementsByTagName(tag);
   var elsLen = els.length;
   var pattern = new RegExp("(^|\\\\s)"+searchClass+"(\\\\s|$)");
   var j = 0;
   for (i = 0 ; i < elsLen; i++) {
      if ( pattern.test(els[i].className) ) {
         classElements[j] = els[i];
         j++;
      }
   }
   return classElements;
}

function sombrear(){
   var aSombrear=getElementsByClass("sombreado","*");
   var total=aSombrear.length;
   for(i=0;i<total;i++){
      objeto=aSombrear[i];
   
      var texto=objeto.firstChild.data;
   
      var sombraSpan=document.createElement("span");
      sombraSpan.appendChild(document.createTextNode(texto));
      sombraSpan.className="sombra";
   
      var textoSpan=document.createElement("span");
      textoSpan.appendChild(document.createTextNode(texto));
   
      objeto.firstChild.data="";
      objeto.appendChild(sombraSpan);
      objeto.appendChild(textoSpan);
   }
}

Ahora el código CSS que nos ayudará a crear el efecto de sombra para el texto:

.sombreado, .sombreado span {position: relative;}

span.sombra{
 position: absolute;
 top: 2px;
 left: 2px;
 color: #b2b2b2;
}

Ahora simplemente creamos un elemento de texto en el documento y le aplicamos la clase de CSS "sombreado".

<h1 class="sombreado">Esto es un título con sombra</h1>

La función de javascript se encarga de

1. Encontrar todos los elementos del documento que pertenecen a la clase "sombreado"


2. Crea dos elementos span, uno para el texto y otro para la sombra


3. Copia el contenido del texto dentro de los 2 span recién creados


4. Reemplaza el contenido original con los 2 span con su correspondiente z orden (sombra, luego texto)

El posicionamiento de la sombra es manejado por la clase .sombra definida en la hoja de estilo. En nuestro ejemplo la sombra está desplazada 2 pixeles hacia abajo y a la derecha.

Es decir, para el ejemplo anterior

<h1 class="sombreado">Esto es un título con sombra</h1>

Se convierte en

<h1 class="sombreado">
 <span class="sombra">Esto es un título con sombra</span>
 <span>Esto es un título con sombra</span>
</h1>

Esto permite crear el efecto deseado sin necesidad de código HTML extra, sin imágenes y que funciona en los navegadores más populares del mercado.

Se puede ver un ejemplo funcionando en http://joserclblogs.googlepages.com/sombras.html