Texto con sombra

Como le colocamos sombra a un texto ¿? Sencillo, lee este tutorial!
RECUERDA: ".textSOMBRA" sera a lo que tu le quieras agregar sombra, EJMPLO: se puede reemplazar por "h3.post-title" para que los titulos de las entradas tengan sombra.
.textoSOMBRA { text-shadow : -3px -4px 5px #000;}
-3px: Posición horizontal {Negativo hacia la derecha / Positivo hacia la izquierda}
-4px: Posición vertical  {Negativo hacia arriba / Positivo hacia abajo}
5px: Intensidad del efecto {Mayor nº sombra mas difusa}
#ffbbcc: Color de la sombra.

a editar con sombras ~

  • Texto con doble sombra:
TEXTO CON SOMBRA
.textoSOMBRA {text-shadow: -3px -3px  #000, 3px 3px #000;}
Donde -3px -3px  #000 es nuestra 1er sombra {superior} & 3px 3px #000 la segunda {inferior}

  • Texto con triple sombra:
TEXTO CON SOMBRA

.textoSOMBRA {text-shadow: 2px 5px 1px #000, -3px 1px 1px #000, 4px -3px 1px #000;}
Donde 2px 5px 1px #000 es la sombra inferior; -3px 1px 1px #000 es la intermedia & 4px -3px 1px #000 la sombra superior.

  • Texto con borde {4 sombras}:

TEXTO CON SOMBRA
{text-shadow: -1px 0 #0006ff, 0 1px #0006ff, 1px 0 #0006ff, 0 -1px #0006ff}
NOTA:Este efecto se puede utilizar, ademas de en titulos & blockquotes {o mensajes de bienvenida, etc.}, como efecto en links al pasar el cursor {hover},simplemente siguiendo los primeros pasos del tutorial, cambiamos "textoSOMBRA" por lo que queremos editar, en este caso por "a:hover", ejemplo:
a:hover {
text-shadow: -3px -3px  #0003px 3px #000;
text-decoration: none;
}
En este tutorial puedes ver un efecto en links con tres sombras de colores:

2 comentarios: