Sombras en texto con CSS3 (Segunda parte)

Hace algún tiempo atrás que publiqué un tutorial acerca de insertar sombras en el texto mediante CSS3. En esta oportunidad veremos algunos nuevos ejemplos para que puedan mejorar un poco la calidad de sus fuentes.

Recuerden que la mayoría de los navegadores soportan la propiedad text-shadow, excluyendo Internet Explorer, así que no dependan de estos atributos de forma exhaustiva ya que los usuarios en IE no conseguirán ver el resultado.

Lista de ejemplos:

Sombra interior:

Ejemplo 1...

Código:

.alguna-clase {
padding: 10px 0;
font: bold 56px 'Myriad Pro',Arial,Helvetica,sans-serif;
color:#D1D1D1;
background:#CCC;
text-shadow: 1px 1px white, -1px -1px #333;
width:100%;
}

Efecto borde (Casi imperceptible):

Ejemplo 2...

Código:

.alguna-clase {
color: #505050;
font: bold 56px 'Myriad Pro',Arial,Helvetica,sans-serif;
padding: 10px 0;
text-shadow: 1px 1px 0 white;
background:#EFEFEF;
width:100%;
}

Sombra fuerte:

Ejemplo 3...

Código:

.alguna-clase {
color: #fff;
font: bold 56px 'Myriad Pro',Arial,Helvetica,sans-serif;
padding: 10px 0;
background:gray;
width:100%;
text-shadow: 1px 1px 1px #000, 2px 2px 1px #000;
}

Efecto Texto 3D versión simple:

Ejemplo Demo 3D...

Código:

.alguna-clase {
color: #8A8A8A;
font: bold 56px 'Myriad Pro',Arial,Helvetica,sans-serif;
padding: 10px 0;
text-shadow: 1px 1px #5f5f5f, 2px 2px #5f5f5f, 3px 3px #5f5f5f, 4px 4px #5f5f5f, 5px 5px #5f5f5f;
background:#bbd5a0;
width:100%;
}

Efecto 3D versión 2:

Ejemplo Demo 3D...

Código:

.alguna-clase {
color: #fff;
font: bold 56px 'Myriad Pro',Arial,Helvetica,sans-serif;
padding: 10px 0;
background:orange;
width:100%;
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);
}

Efecto 3D (Efecto Vidrio):

Ejemplo Demo 3D...

Código:

.alguna-clase {
color: #dfe9ec;
font: bold 56px 'Myriad Pro',Arial,Helvetica,sans-serif;
padding: 10px 0;
background:#a0cad5;
width:100%;
text-shadow: 1px 1px 1px #222, -2px 2px 1px #ccc, -3px 3px 1px #222;
}

Recuerda que para usar alguno de estos ejemplos deberás elegir alguna clase y en ésta pegar los atributos.

Importante:
Si quieres crear tus propios efectos mediante sombras puedes revisar el tutorial anterior en el que se explica paso a paso cómo usar la propiedad text-shadow.