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:
- text-shadow: xPosición yPosición amplitud #color;
- 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.