Efectos de sombra en los textos con text-shadow

Una de las maravillas del CSS es que podemos hacer que los textos se vean tan espectaculares como si los hubi�ramos hecho con Photoshop o algo parecido, y sin necesidad de usar im?genes en la mayor?a de los casos.

text-shadow es una propiedad que aplica una sombra a un texto, pero adem?s podemos a?adir m?ltiples sombras de diversos colores -y transparencias- a un mismo elemento y con ello podemos conseguir textos m?s llamativos y que salen de lo ordinario.

Lo que veremos a continuaci?n son 12 ejemplos con text-shadow ya sea para que decores el t?tulo de tu blog, los t?tulos de tus entradas, de tus gadgets, o cualquier texto que se te ocurra.

Primero vamos a ver c?mo ponerlo a cualquier texto, ya sea al texto de una entrada, o al de un gadget. En cualquiera de los casos el CSS va antes de ]]></b:skin> y el HTML dentro de tu post o donde lo quieras usar.

Texto con Relieve

Lorem Ipsum

CSS

.sombra1 {
color: #f2f2f2;
text-shadow: 0px -1px 0px #424242;
font-size: 100px;
font-family: 'Unna', serif;
}

HTML

<span class='sombra1'>Lorem ipsum</span>

Texto con sombra tenue

Lorem Ipsum

CSS

.sombra2 {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 80px;
font-weight: bold;
font-family: 'Arial Black';
}

HTML

<span class='sombra2'>Lorem ipsum</span>

Texto con sombra marcada

Lorem Ipsum

CSS

.sombra3 {
color: #b82f14;
text-shadow: 6px 6px 0px rgba(83,155,194,0.5);
font-size: 80px;
font-family: 'Sancreek', cursive;
}

HTML

<span class='sombra3'>Lorem ipsum</span>

Texto vintage

Lorem Ipsum

CSS

.sombra4 {
color: #69D2E7;
text-shadow:
4px 4px 0px #E0E4CC,
9px 8px 0px #F38630;
font-size: 100px;
font-family: 'Lobster', cursive;
}

HTML

<span class='sombra4'>Lorem ipsum</span>

Texto en 3D

Lorem Ipsum

CSS

.sombra5 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color: #fff;
font-size: 90px;
font-family: Impact;
}

HTML

<span class='sombra5'>Lorem ipsum</span>

Texto con efecto ne?n

Lorem Ipsum

CSS

.sombra6 {
color: #DF01A5;
text-shadow: 0px 0px 8px #FE2EF7;
font-size: 80px;
font-family: 'Orbitron', sans-serif;
}

HTML

<span class='sombra6'>Lorem ipsum</span>

Texto tipo retro

Lorem Ipsum

CSS

.sombra7 {
padding-left: 20px;
text-transform: uppercase;
color: #E8E3AE;
text-shadow:
-10px 10px 0px #A9CBA6,
-20px 20px 0px #7EBEA3,
-30px 30px 0px #53A08E;
font-size: 80px;
font-family: 'Luckiest Guy', cursive;
}

HTML

<span class='sombra7'>Lorem ipsum</span>

Texto tipo comic

Lorem Ipsum

CSS

.sombra8 {
color: #fff;
text-shadow:
-2px -2px 0 #000,
1px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
font-size: 100px;
font-family: 'Boogaloo', cursive;
}

HTML

<span class='sombra8'>Lorem ipsum</span>

Texto con efecto anaglifo

Lorem Ipsum

CSS

.sombra9 {
text-shadow:
9px 2px 0 rgba(0, 255, 255, 0.5),
-6px -1px 1px rgba(255, 0, 0, 0.4);
color: #2A0A12;
font-size: 80px;
font-family: 'Special Elite', cursive;
}

HTML

<span class='sombra9'>Lorem ipsum</span>

Texto con fuego

Lorem Ipsum

CSS

.sombra10 {
color: #DF0101;
margin: 10px;
padding: 40px 0 10px;
text-align: center;
text-shadow:
0 0 4px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
font-size: 90px;
font-family: 'New Rocker', cursive;
}

HTML

<span class='sombra10'>Lorem ipsum</span>

Texto borroso

Lorem Ipsum

CSS

.sombra11 {
color: transparent;
text-shadow: #81DAF5 0 0 12px;
text-transform: uppercase;
font-size: 60px;
font-family: 'Chango', cursive;
}

HTML

<span class='sombra11'>Lorem ipsum</span>

Texto estilo groovy

Lorem Ipsum

CSS

.sombra12 {
color: #fcc90f;
text-shadow:
-2px -2px 0 #29296e,
1px -2px 0 #29296e,
-2px 2px 0 #29296e,
2px 2px 0 #29296e,
1px 1px #e60602,
2px 2px #e60602,
3px 3px #29296e,
4px 4px #29296e,
5px 5px #29296e,
6px 6px #29296e,
7px 7px #29296e,
8px 8px #29296e,
9px 9px #29296e,
10px 10px #29296e,
11px 11px #29296e,
12px 12px #29296e,
13px 13px #29296e,
14px 14px #29296e,
15px 15px #29296e,
16px 16px #29296e,
17px 17px #29296e,
18px 18px #29296e,
19px 19px #29296e,
20px 20px #29296e;
font-size: 90px;
font-family: 'Henny Penny', cursive;
}

HTML

<span class='sombra12'>Lorem ipsum</span>

En todos los casos yo he puesto un tipo de fuente s?lo para ejemplificar, si deseas usar esa fuente t?mala de Google Fonts, o c?mbiala por otra.
Tambi�n puedes cambiar los colores, ya sea el del texto, o de la sombra, s?lo deber?s cambiar los c?digos hexadecimales (los que empiezan con signo de n?mero) o los rgba (los que est?n entre par�ntesis), seg?n sea el caso.

Si quisieras usar estos textos con sombras en el t?tulo de tu blog, ?nicamente cambia la clase del texto, por ejemplo, en lugar de .sombra1 { pondr?as .header h1 {

Si quisieras usarlo en los t?tulos de tus entradas, cambia .sombra1 { por .post h3 {

Si quisieras usarlo en los t?tulos de tus gadgets, cambia .sombra1 { por .sidebar h2 {

Toma en cuenta que en algunas plantillas los nombres de las clases de estas ?reas pueden variar, los que he mencionado son para las plantillas originales de Blogger.
Tambi�n considera que si lo usas para los t?tulos de tu plantilla, ya sea para el t?tulo del blog, de entradas, o gadgets, quiz? tengas que eliminar otros estilos que ya est�n especificados en tu plantilla, as? que en esos casos deber?s localizar los estilos de esas ?reas y eliminar los que creas que "afectan" la forma como se mira el resultado final.

Si no has podido ver ning?n efecto de sombras en los textos que hemos puesto de ejemplo, entonces usas un navegador muy antiguo. En lo que cambias a un navegador m?s moderno te dejo la imagen de c?mo se deben ver los textos con sombras de esta entrada.