Sombras en el texto con text-shadow de CSS

El atributo text-shadow de CSS sirve para crear sombras en el texto, pero realmente con un poco de práctica e imaginación nos puede dar soporte a muchos otros efectos interesantes. En este artículo explicaremos dicha regla de estilos y ofreceremos ejemplos variados para demostrar su versatilidad.

Antes de comenzar quiero aclarar que, a pesar de haber puesto el artículo dentro del Manual de CSS3, la regla de estilos text-shadow no pertenece a CSS3 sino que ya fue introducida en el nivel 2 de las Hojas de Estilo en Cascada. Sin embargo, hasta ahora no se había implementado dentro de los navegadores más comunes, por eso la estamos agrupando como novedad dentro de este Manual de CSS3.

Una vez comentado ese detalle sobre las sombras en texto, con CSS y sin utilizar un programa de diseño gráfico, en breves instantes comprobaremos lo fácil que crearlas. Comencemos viendo un ejemplo de declaración con text-shadow.

Sombra sólida

h1{
   text-shadow: 1px 2px #999;
}

Así estamos modificando los encabezamientos de nivel 1 para que tengan una sombra sólida de color gris. Los valores que estamos indicando en la sombra son:

• Desplazamiento de la sombra a la derecha (1px).
• Desplazamiento de la sombra hacia abajo (2px).
• Color de la sombra (#999).

Sombra desenfocada

La sombra sólida está bien, pero en muchos casos vamos a desear hacer un efecto de desenfocado de la sombra, que es mucho más realista y a menudo más atractivo visualmente. Para ello podemos definir un valor adicional, que es el tamaño del difuminado.

h2{
   text-shadow: 3px 3px 2px #696;
   color: #666;
}

Aquí hemos definido una sombra con 3px de desplazamiento abajo y a la derecha y 2px de difuminado o desenfoque. Además la sombra es de color verdoso. También se ha definido el color del texto, con el atributo "color", pero eso no tienen nada que ver con la sombra.

Colocar varias sombras en un mismo elemento

Podemos definir varias sombras diferentes sobre un mismo elemento de la página, con lo que se pueden obtener efectos variados y algunos de ellos bastante llamativos. Para ello se pueden colocar las sombras que se deseen separadas por comas.

h3{
   text-shadow: 10px 8px #ccf, -10px 12px #fcf, -8px -12px #cfc, 12px -5px #fc9;
   color: #999;
}

Esto no tiene ningún misterio, simplemente se irán colocando todas las sombras que definamos, pero habrá que tener un poco de criterio para hacer efectos que merezcan la pena.

Efectos diversos con sombras CSS

El atributo text-shadow es un excelente recurso para hacer distintos tipos de efectos gráficos que resultan visualmente atractivos, más aun teniendo en cuenta que se hacen con texto simple y asignado únicamente algunas reglas de estilo. A continuación veremos varios ejemplos que podemos anotarnos como inspiración, pero la gama de posibilidades va mucho más allá.

Sombra "Giga":
Podemos utilizar varias sombras sólidas para generar una supersombra para nuestro texto.

h2.sombragiga{
   text-shadow: #f83 -1px 1px, #f83 -2px 2px, #f83 -3px 3px, #f83 -4px 4px, #f83 -5px 5px;
   color: #060;
   letter-spacing: 1px;
}

Efecto de fuego:
Si usamos varias sombras de colores anaranjados podemos conseguir un efecto de fuego. Nos toca hacer un poco de prueba y ensayo para conseguir un resultado realista, pero se puede conseguir algo interesante.

h2.fuego{
   text-shadow: 0 0 20px #fefcc9, 2px -2px 3px #feec85, -4px -4px 5px #ffae34, 5px -10px 6px #ec760c, -5px -12px 8px #cd4606, 0 -15px 20px #973716, 2px -15px 20px #451b0e;
   color: #666;
}

Contornear el texto con un trazo:
Con cuatro sombras sólidas a un píxel de distancia del texto, situadas a los cuatro lados, podemos conseguir un efecto de trazo alrededor del texto.

h2.contornear{
   text-shadow: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
   color: #fff;
}

Texto en relieve:
Con una sombra oscura y otra clara podemos conseguir un efecto de relieve sobre el texto. Puede ser un relieve o un bajo relieve, dependiendo de donde coloquemos ambas sombras.

h2.relieve {
   text-shadow: 1px 1px white, -1px -1px #333;
   background-color: #ddd;
   color: #ddd;
   padding: 10px;
}

Efecto Pixelart:
Con un poco más de imaginación podemos conseguir efectos de lo más diverso. En este caso hemos hecho una prueba que da un resultado de diseño "pixelart", de aquellos gráficos creados píxel a píxel de los juegos de antaño.

h1.pixelart{
   text-shadow: 1px 1px #666, 2px 2px #86D6D3, 3px 3px #666, 4px 4px #86D6D3;
   color: #ccc;
}

Todos los estilos de sombras ofrecidos en este artículo se pueden ver en una página aparte.

Conclusión a text-shadow

En definitiva, las sombras CSS que conseguimos con text-shadow nos ofrecen una nueva vía muy rápida y creativa para dar algunos toques de diseño en nuestros sitios web, sin tener que recurrir a Photoshop, u otro programa de diseño, como ocurría anteriormente.

Si buscamos artículos antiguos dentro de DesarrolloWeb.com veremos que se ofrecen talleres diversos para crear sombras en textos y en algún caso se ofrecen técnicas CSS para emular las sombras cuando no existía el atributo text-shadow. Todas las posibilidades anteriores necesitaban de un trabajo minucioso y la colaboración de otras técnicas o programas como editores gráficos.

Otra de las ventajas de usar CSS es que, si mañana deseamos cambiar cualquier cosa, como el tamaño del texto, el efecto de la sombra o simplemente el color de la web y con ello el color de las sombras para que casen con la nueva cromática, únicamente tenemos que editar nuestra declaración de estilos.