Sombra de texto CSS: Cómo aplicar sombras y otros efectos con text-shadow

4min

El atributo text-shadow de CSS sirve, en un principio, para crear sombras en el texto. Después de adquirir tu dominio y un hosting, es probable que quieras aplicar efectos de diseño a tu web. En este artículo, explicamos cómo utilizar esta regla de estilos y, con ejemplos prácticos, mostramos su versatilidad a la hora de crear muchos otros efectos interesantes, como darle un relieve a la tipografía o pixelizarla.

La regla de estilos text-shadow se ha implementado a día de hoy dentro de los navegadores más comunes y ofrece una forma rápida y creativa para dar algunos toques de diseño sin tener que recurrir a programas de edición gráfica.

Además, otra ventaja de usar el atributo text-shadow de CSS es que, si en algún momento necesitamos cambiar el tamaño del texto, el efecto de la sombra o simplemente el color de la web, únicamente tendremos que editar nuestra declaración de estilos.

Ejemplo de declaración con text-shadow para una sombra sólida:

h1{
 text-shadow: 3px 5px #88;
 }

En este ejemplo,  hemos modificado los encabezamientos de nivel 1 para que aparezcan con una sombra sólida de color gris. Los valores indicados en la sombra son:

  • Desplazamiento de la sombra a la derecha (3px).
  • Desplazamiento de la sombra hacia abajo (5px).
  • Color de la sombra (#88).
Índice

Sombra desenfocada

Si queremos hacer un efecto de desenfocado de la sombra, mucho más realista, definiremos un valor adicional, el tamaño del difuminado.

h2{
 text-shadow: 5px 5px 2px #680;
 color: #680;
 }

Basándonos en el ejemplo anterior, aquí podremos deducir que hemos definido una sombra con 5px de desplazamiento abajo y a la derecha y 2px de difuminado. Además, podemos definir el color de dicho difuminado. También podemos ver en este ejemplo el color del texto elegido, con el atributo color.

Definir varias sombras en un mismo elemento

También es posible, si nos interesa, definir varias sombras diferentes sobre un mismo elemento de la página. Para ello, colocaremos las sombras separadas por comas de esta manera:

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

Simplemente, tendremos que colocar todas las sombras que definamos con un poco de criterio para así conseguir efectos que puedan resultar atractivos.

Otros efectos con sombras CSS

text-shadow es un excelente recurso para crear distintos tipos de efectos gráficos, pues su uso es sencillo, con texto simple y asignado únicamente algunas reglas de estilo.

Otro que te recomendamos es el de crear el efecto de resplandor CSS.

Además, otros estilos que podemos obtener al definir el atributo text-shadow son:

    • Sombra gigante. La combinación de varias sombras sólidas nos permite generar una sombra descomunal. 
       h2.sombragigante{
 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. Con sombras de tonos anaranjados, podemos conseguir un efecto fuego. 
       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. Cuatro sombras sólidas a un píxel de distancia del texto, situadas a los cuatro lados, nos darán el efecto de trazo alrededor de nuestro 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 o bajo relieve, dependiendo de donde coloquemos las sombras. 
       h2.relieve {
 text-shadow: 1px 1px white, -1px -1px #333;
 background-color: #ddd;
 color: #ddd;
 padding: 10px;
 }
    • Efecto Pixelart: Este ejemplo da como resultado un efecto pixelado, como el de los gráficos de los videojuegos de antaño, creados píxel a píxel. 
       h1.pixelart{
 text-shadow: 1px 1px #666, 2px 2px #86D6D3, 3px 3px #666, 4px 4px #86D6D3;
 color: #ccc;
 }

 

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: