Como agregar sombras en el texto

El otro día buscando tener algún efecto en el texto del título del blog en una de mis plantillas, sin usar imagenes, me encontré con una aplicación muy sencilla de aplicar, pero con un resultado atractivo, en el blog de Miguel Manchego.



Se trata de usar una propiedad de CSS3 con la cual se creará un sombreado en el texto al estilo photoshop, solo basta con agregar unas cuantas lineas en el código de nuestra plantilla  y determinar unos cuantos valores:





Ej.Veremos como aplicarla en el título de tu blog:



 Paso 1:Vé a Diseño > Edición de HTML y en el código de la plantilla busca la parte del código que identifica el título de la plantilla, varía un poco según el diseño, pero se debe parecer a algo como esto:



h1.title {

 margin:0 10px 25px;

...

}



ó



#header h1 {

  margin:5px 5px 0;

 ...

}



Paso 2: Una vez identificado, agregas el siguiente código:

text-shadow: 2px 3px 4px #000000;

El valor 2px indica el desplazamiento de la sombra dentro del eje X (horisontalmente)

El valor 3px indica el desplazamiento de la sombra dentro del eje Y (verticalmente)

El valor 4px indica el efecto difuminado de la sombra (el Blur)

#000 indica el color de la sombra (mismo que puedes cambiar segun tu gusto usando esta tabla de colores hexadecimales.



Paso 3: Prueba cambiando dichos valores y pon vista previa, para ver si te gusta el resultado, una vez que lo consigas, guardas los cambios y listo. 



El texto con sombra puede verse así:

El titulo de mi Blog.

Nota: Este efecto solo puede verse en navegadores modernos como Firefox, Chrome, Safari, Opera entre otros, no en Internet Explorer (una razón más, de las muuuchas razones que existen para empezar a usar otros navegadores).



Tip: Ahora, existe un efecto que se puede agregar al texto y que funciona en Internet Explorer,  se trata de usar un filtro el cual creará un efecto como difuminado alrededor de este, habrá que seguir los mismos pasos y agregar la siguiente linea de código:

filter: glow(color=#543f09,Strength=4);

#543f09 indica el color del efecto

strength=4 indica la intensidad del efecto

Así se vería el texto:

Esta es una muestra de como se ve el texto usando esta propiedad, y funciona en Internet Explorer.

Tip: Puedes utilizar ambos efectos simultaneamente, y aunque no se verán igual en Firefox e Internet Explorer (navegadores mas utilizados) por lo menos los usuarios de ambos navegadores verán un efecto en el texto, aunque no sea el mismo, ¿qué te parece?

Recomendación: Es posible agregar estos efectos en otras partes de tu blog, como por ejemplo los títulos de tus entradas, los títulos de las columnas de la plantilla, columnas del footer, etc, etc...