CSS3: Text-shadow, creando tipografías llamativas con sombreado


       Una de las características que nos ahorran imágenes en CSS3 es text-shadow. Ya que jugando con la fuente, el color de fondo, de la letra y su sombra podemos hacer tipografías de diseño sin tener que cargar ninguna imagen.

       Funciona sin prefijo en Firefox (3-5+), Chrome (4+), Safari (4+), Opera (9.5+), IOS (3.2+) y Android (2.1+). Como (casi) siempre Internet Explorer no lo soporta todavía, pero lo hará en la versión 10.

       La sintaxis básica de esta propiedad es:

text-shadow: Hor Ver Blur color;

       Donde Hor es el desplazamiento horizontal de la sombra, Ver su desplazamiento vertical y Blur, el radio de difuminación de la sombra (cuanto más alto más lejos y con menos intensidad llegará la sombra). Color es un color en cualquier formato entendible (#FFF, rgb, rgba, hsv, etc).

       Vamos a ver algunos ejemplos de uso de sombreado en las letras:

#efectoBasico{
    color: #222;
    text-shadow: 0px 1px 1px #4d4d4d;
}


Texto con un poco de sombra

#sombraLejana{
    color: rgb(0, 17, 255);
    text-shadow: 12.5px 6.5px 2px rgba(123, 14, 240, 0.8);
}


Parece que las letras estén a cierta altura sobre el fondo

       Otra característica es que el efecto de sombra no tiene por qué ser único, podemos dar varias sombras, poniendo una detrás de otra separadas por comas, para obtener efectos tan impresionantes como este:

#efecto3D{
    color: #fff;
    text-shadow: 0px 2px 0px #888, 0px 3px 0px #777, 0px 1px 0px #999, 0px 5px 0px #555, 0px 6px 0px #444, 0px 4px 0px #666, 0px 7px 0px #333, 0px 8px 7px #001135;
}


Texto en 3D

       Y otros efectos visualmente llamativos con multi-sombras:

#neon{
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px rgb(94,119,160), 0 0 30px rgb(94,119,160), 0 0 40px rgb(94,119,160), 0 0 50px rgb(94,119,160), 0 0 75px rgb(94,119,160);
    letter-spacing: 4px;
    background: #000;
}


Texto de neón

#nube{
color: #fff;
text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.6),  0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
background:#00f;
}

Texto aspecto de nube