Muchas veces se utiliza Photoshop para crear títulos o textos con sombras, bajo-relieves, bordes, etc. creando para ello primero una imagen que después será utilizada en nuestra página. Sin embargo, podemos simular el mismo efecto (más o menos) utilizando solamente HTML/CSS con el estilo text-shadow. Este estilo fue propuesto para CSS2 aunque no ha sido aceptado hasta la aparición de CSS3. La mayoría de los navegadores lo soportan completamente: Konqueror, Firefox 3.1, Safari 4, Opera 9.5, Chrome 2, Epiphany (Linux). Y otros los soportan parcialmente (sin múltiples sombras) como Safari 3.1, Shiira e iCab (MacOS), iPhone Safari. Se queda fuera Internet Explorer, aunque siempre se pueden utilizar algunos trucos.

La sintaxis es:

name { text-shadow: X Y size radius; }

Los parámetros que acepta son:

• X: desplazamiento lateral (en px, pt, em). Un valor positivo para X significa que la sombra aparecerá a la derecha. Ejemplo: 2px.
• Y: desplazamiento vertical (en px, pt, em). Un valor positivo para Y significa que la sombra aparecerá abajo. Ejemplo: 2px.
• radius: tamaño de la sombra (en px, pt, em). A menor valor, más nítida aparecerá la sombra. Y a mayor valor, más difuminada (borrosa). Ejemplo 0.5px.
• color: Color de la sombra. Ejemplo: #000000.

El color se puede indicar al final o al principio de la definición. Se pueden concatenar varias sombras, separándolas por comas.

El objetivo del estilo es crear una sombra bajo el texto en la dirección indicada por X e Y, con el radio (o difusión) y color especificados. Combinando el color, la difusión y la posición de la sombra con el colo del texto y el fondo, podemos conseguir diversos efectos de una manera sencilla y limpia, ahorrándonos el trabajo de crear el mismo texto como una imagen en Photoshop o cualquier otro software de edición gráfica.

Ejemplos de sombras:

text-shadow: 1px 1px 0.25em black;
color:black;

Esto es un ejemplo de sombra

text-shadow: 0.25em 0.25em 0.05em #8888FF;
color: blue;
background: #EEF

Esto es un ejemplo de otra sombra

text-shadow: 2px 2px 0.05px #000;
color: white;
background: #897;

Y esto es otra sombra más

 

También se puede combinar varias sombras en el mismo estilo, separándolas por comas:

text-shadow: 0.2em 0.5em 0.1em #F66,
            0.6em 0.1em 0.1em #3B3,
            0.4em -0.3em 0.1em #66F;
color: #000;
background: #EEF;

Ejemplo de triple sombra multicolor

 

Con el mismo color de fuente que de fondo, y creando una sombra más oscura arriba y otra más clara abajo, podemos hacer resaltados de bajo relieves:

text-shadow: -1px -1px white, 1px 1px #333;
color: #BBB;
background: #BBB;

Ejemplo de 2 sombras para hacer bajo relieves

text-shadow: 1px 1px white, -1px -1px #333;
color: #BBB;
background: #BBB; 

Otro ejemplo de sombra para hacer bajo relieves

 

Y con cuatro sombras y diferentes colores de fondo y de letra, podemos hacer bordeados nítidos para resaltar letras, o de colores y borrosos para darles un efecto de iluminación por detrás, o incluso de fuego:

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
color: #FFF; background: #FFF; 

Mismo color de fondo que de letra, y bordes oscuros

text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
color: #FFF;
background: #FFF; 

Mismo color de fondo que de letra, luz trasera

text-shadow:0 0 4px white, 0 -5px 4px #FFFF33,
    2px -10px 6px #FFDD33, -2px -15px 11px #FF8800,
    2px -25px 18px #FF2200;
color: #222;
background: black

Efecto de fuego con varias sombras

 

De todas formas, no es necesario limitarse a buscar efectos impresionantes para hacer títulos que llamen la atención. Podemos utilizar las sombras sutilmente para resaltar el cuerpo de un texto y mejorar su lectura. El siguiente texto es un texto normal sin sombra:

Y el mismo texto, pero con style="text-shadow: 1px 1px 2px black".

El resultado final es que el texto posee una sombra que casi no se percibe, pero que realza el texto. Como conclusión final tenemos que con el estilo text-shadow y un poco de imaginación, se pueden conseguir resultados muy diferentes, tanto si queremos simplemente decorar o realzar un texto hasta crear títulos con efectos. Un consejo: hay que evitar abusar del efecto, o el resultado final es que el texto quede muy recargado y sea más difícil de leer, consiguiendo el efecto contrario al deseado. Las ventajas de usar este estilo frente a usar una imagen hecha con Photoshop son:

• Menor cantidad de espacio ocupado, mayor rapidez de carga: solo HTML/CSS frente a descargarte una imagen (2kb ó 20kb).
• Al conservar el texto como parte del HTML, los buscadores y robots lo podrán detectar y leer. El contenido de una imagen es invisible a los buscadores.
• Posibilidad de crear efectos en textos dinámicos. Es decir, es posible modificar el texto y el efecto se mantiene. El contenido de una imagen es inmutable.
• El texto es accesible. Por ejemplo, la gente que tenga configuradas fuentes grandes por tener poca visión podrán leerlo mejor, y los invidentes también tendrán más facilidad para leerlo, sin tener que acudir al texto alternativo de la imagen (por Akbarr, en un comentario, gracias!)

Inconvenientes

• No es soportado por todos los navegadores y puede haber diferencias sensibles entre unos y otros. La única manera de asegurarse de que el texto se ve como realmente quieres que se vea, es creando una imagen.

Y algunos enlaces de interés:

• Referencia y ejemplos en w3.org.
• Algunos hacks para que funcionen las sombras en cualquier navegador.
• Una buena guía con más sombras.

Popularity: 1% [?]