CSS3: Algunos ejemplos con la propiedad text-shadow

En está coyuntura me he decidido a relatar este entrada, para mostraros varios ejemplos de text-shadow, qué es una propiedad CSS3 que te permite añadir sombras en el texto cómo su nombre indica en inglés, y está formada por cuatro parámetros, Xposición: indica el desplazamiento horizontal de la sombra con respecto al texto, (positivos hacia la derecha, y negativos hacia la izquierda), Yposición: indica el desplazamiento de la sombra con respecto al texto (positivos hacia abajo, y negativos hacia arriba), amplitud: es el tamaño de esa sombra, a mayor valor, el efecto de blur es mucho mayor, y por último, el color, que es obviamente el color de la sombra, (shadow). A continuación verás el método:

1. text-shadow: xPosición yPosición amplitud #color;
2. text-shadow: 2px 2px 2px #aaa;

Text-shadow es compatible en estos navegadores siguientes:

Ejemplo 1

.ej1 { text-shadow:2px 2px 2px #aaa;font-family: Georgia, Times New Roman, serif;font-size: 120px; }

<div style="text-align: center;">
<div class="ej1">Aizum Blog</div></div>

Ejemplo 2

.ej2{ color:#fff; text-shadow:2px 2px 2px #000;font-family: Arial, Times New Roman, serif;font-size: 120px; }

<div style="text-align: center;">
<div class="ej2">Aizum Blog</div></div>

Ejemplo 3

.ej3 { color:#fff; text-shadow:0 0 5px #000;font-family: Verdana, Times New Roman, serif;font-size: 120px;}

<div style="text-align: center;">
<div class="ej3">Aizum Blog</div></div>

Ejemplo 4

.ej4{ color:transparent; text-shadow:0 0 5px #000;font-family: Courier, Times New Roman, serif;font-size: 120px; }

<div style="text-align: center;">
<div class="ej4">Aizum Blog</div></div>

Ejemplo 5

.ej5{ text-shadow:2px 2px 0 #aaa; font-family: Arial, Times New Roman, serif;font-size: 120px; }

<div style="text-align: center;">
<div class="ej5">Aizum Blog</div></div>

Ejemplo 6

.ej6{ text-shadow:1px 1px 0 #fff, 2px 2px 0 #000;font-family: Helvetica, Times New Roman, serif;font-size: 120px;}

<div style="text-align: center;">
<div class="ej6">Aizum Blog</div></div>

Ejemplo 7

.ej7 { text-shadow:30px 10px 0 #aaa;font-family: Trebuchet, Times New Roman, serif;font-size: 120px; }

<div style="text-align: center;">
<div class="ej7">Aizum Blog</div></div>

Ejemplo 8

.ej8 { color:#000; text-shadow:1px 1px 0 magenta, 2px 2px 0 orange, 3px 3px 0 yellow, 4px 4px 0 purple, 5px 5px 0 blue, 6px 6px 0 indigo, 7px 7px 0 violet; font-family: Times, Times New Roman, serif;font-size: 120px; }

<div style="text-align: center;">
<div class="ej8">Aizum Blog</div></div>

Ejemplo 9

.ej9{ color:#fff; text-shadow:-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,1px 1px 0 #000;font-family: Times New Roman, serif;font-size: 120px; }

<div style="text-align: center;">
<div class="ej9">Aizum Blog</div></div>

Ejemplo 10

.ej10{ color:rgba(0,0,0,0.5); text-shadow:3px 3px 0 #aaa; font-family: Consolas, Times New Roman, serif;font-size: 120px; }

<div style="text-align: center;">
<div class="ej10">Aizum Blog</div></div>

Ejemplo 11

.ej11{color: #000;text-shadow: 5px 5px 20px #AAA; font-family: Monaco, Times New Roman, serif;font-size: 120px;}

<div style="text-align: center;">
<div class="ej11">Aizum Blog</div></div>

Ejemplo 12

.ej12{ color: #999;text-shadow: 10px 10px 10px #000; font-family: Georgia, Times New Roman, serif;font-size: 120px; }

<div style="text-align: center;">
<div class="ej12">Aizum Blog</div></div>

Ejemplo 13

.ej13{ color: #101921;text-shadow: 3px 3px 10px red, -3px -3px 10px yellow; font-family: Arial, Times New Roman, serif;font-size: 120px; } 

<div style="text-align: center;">
<div class="ej13">Aizum Blog</div></div>

Ejemplo 14

.ej14{ color:#eeeeee;text-shadow: -1px -2px #cccccc;font-family: Courier, Times New Roman, serif;font-size: 120px; } 

<div style="text-align: center;">
<div class="ej14">Aizum Blog</div></div> 

Ejemplo 15

.ej15{background: #000000;-webkit-background-clip: text;-moz-background-clip: text;background-clip: text;
color: transparent;text-shadow: 0px 3px 3px rgba(255,255,255,0.5),0px -1px 1px rgba(0,0,0,.3);font-family: Helvetica, Times New Roman, serif;font-size: 120px;}

<div style="text-align: center;">
<div class="ej15">Aizum Blog</div></div>

Get free premium widgets for your blog and website.