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.
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
- Encontrar todos los elementos del documento que pertenecen a la clase "sombreado"
- Crea dos elementos span, uno para el texto y otro para la sombra
- Copia el contenido del texto dentro de los 2 span recién creados
- Reemplaza el contenido original con los 2 span con su correspondiente z orden (sombra, luego texto)
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