Sombras en el texto con text-shadow de CSS

  • Por
Cómo aplicar sombras y otros efectos en los textos con CSS y el atributo text-shadow.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Alraul

22/8/2011
No funciona en Explorer
Gracias Miguel, realmente sencillo y bastante vistoso el resultado. No obstante veo que no funciona en Explorer 9. Una pena, la de limitaciones que da el buscador mas usado.

Diego Alcacer

26/8/2011
Sin duda
Si, sin duda. Merece la pena apuntarse este efecto de sombras, quefa fantástico. Supongo q poco a poco se convertirá en un estandar y tendencia de diseño.

lok

29/8/2011
Felicitaciones
Estoy estudiando programación y tengo desarrolloweb como la principal enciclopedia de consulta, ya que en muchos de sus temas me parece que han desarrollado un grandísimo trabajo,enhorabuena y ánimos para que sigan en esa línea.

Mwrder

01/9/2011
Text shadow
Excelente el artículo!
Con respecto al lo del no funcionamiento en Internetet Exploter del que hablan arriba, es porque éste browser no respeta los mismos parámetros estándares de los demás (chrome, firefox, opera, safari, etc), para eso están los hakcs para "mentirle" al navegador y que los reconozca cómo válidos.
Después hago un artículo y se los paso.

Saludos.

Eddie Acosta

01/9/2011
Efectos de sombras
Me parecen interesantes estos efectos, y los felicito por compartirlos.

Macintosh

05/9/2011
Sombras en el texto con text-shadow de CSS
Que tal,

Después de ver sus comentarios y dudas, me he puesto manos a la obra y, les comento lo que tienen que hacer para que el IE reconozca esta modalidad:

Como se trata de un hack, el único archivo que se tiene que modificar es style.css. Estando ahí. ubicar la sección #header h1 (o cualquier otro nombre que se le quiera dar) y lo que deben hacer es anteponer el parámetro html>body (Ya que, esto, IE no lo reconocerá nunca pero, si los demás navegadores). Ahora bien, el código para que funcione en IE es el siguiente:

#header h1 {
text-shadow:#232323 -1px 1px -2px 2px -3px 3px -4px 4px -5px 5px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#232323', Direction=135, Strength=4);
}

OJO: Este código es para IE con los parámetros, colores y tamaños que ustedes quieran modificar para su sitio Web

Espero les haya sacado de dudas. De lo contrario, haganmelo saber y los ayudo

midesweb

06/9/2011
Huir de los hacks CSS
Sobre el hack CSS de Macintosh,
La recomendación es no usar hacks CSS, porque son peligrosos. Hoy te pueden funcionar pero quizás navegadores más modernos no los entiendan como tú habías planeado. Aparte que tu página se validará incorrectamente en los servicios de validación del W3C.
En resumen, yo quería dar otra opción interesante que estoy estudiando últimamente, que es utilizar las librerías Modernizr para la compatibilidad de CSS3 en todos los navegadores. Puedes aprender sobre ello en:
http://www.desarrolloweb.com/manuales/manual-modernizr.html

manuel

06/9/2011
no se ve en internet explorer
estes ejemplo no se ve en internet explorer

Macintosh

06/9/2011
Hacks en CSS
Gracias, eugim. Me parece interesante tu señalamiento. Lo estudiaré y lo comento posteriormente.

Un saludo,

UN1C0

26/12/2011
gracias por la info
muy buena explicación sobre sombras, muy útil la verdad.

Cotelandia

07/2/2012
O.o
"Colocar varias sombras en un mismo elemento" ..Acabo de enterarme xD

Mentewebs

04/6/2014
Sombra css3
Este efecto si puede verse en ie8, mediante hacks css, es muy bueno.

Eli

20/4/2015
sugerencia
muy lindo y todo pero creo que sería bueno que colocaras una imagen del resultado de cada sombra. =)