Texto con Sombra, cajas con sombra + hack para IE

Visistando la página de Lon Raasch, creador de TranslateThisButton, encontré un hack para lograr mostrar el sombreado del texto y cajas en IE.



Anteriormente les había dicho como agregar texto con sombra en cualquier parte del blog, ahora les puedo decir que el texto sombreado será visible también en Internet Explorer, What? ¿en Internet Explorer? sí, leíste bien, en Internet Explorer...pero, ¿cómo es  posible?, ¿acaso Internet Explorer se puso las pilas y ya traduce el código para la sombra de texto?



No, no se puso las pilas, ni tampoco traduce el código para dar sombra en el texto, por ahora; esto lo conseguiremos con un hack, que es el siguiente:

<!--[if IE]>

<style>

/* call this in IE only */

.texto con sombra {

zoom: 1;

filter: progid:DXImageTransform.Microsoft.Shadow(

color='#777777', Direction=135, Strength=5);  

    }

</style>

<![endif]-->

..y que deberás poner después de ]]></b:skin>



También, tienes que sustituir la parte que dice .texto con sombra por la parte de la plantilla que quieres dar sombra y hacerla visible en Internet Explorer, considerando que ya usaste el sombreado en esa misma parte(esto para que se vea igual en todos lo navegadores) usando la propiedad, y cambiar los valores.



Ejemplo, supongamos que quieres dar sombra al título de tu blog, para ello, agregaras el código anterior, dentro de los atributos de el tíitulo, en el código de tu plantilla.



Dependiendo la plantilla, el título se puede encontrar definido de varias formas pero comúnmente lo encuentras como  h1.title o #header h1,  a esa sección, vas a agregar la propiedad anterior, esto ya lo había dicho en la entrada  de Texto con sombra.



Luego, utilizarás este hack, para que el texto con sombra se vea en Internet Explorer.



Ej. para mostrar sombra en el texto en el título del blog en IE.Solo tienes que agregar el siguiente código en tu plantilla, después de ]]></b:skin>

<!--[if IE]>

<style>

/* call this in IE only */

h1.title {

zoom: 1;

filter: progid:DXImageTransform.Microsoft.Shadow(

color='#777777', Direction=135, Strength=5);  

    }

</style>

<![endif]-->

Variables para los valores



Puedes cambiar los valores del color para cambiar el color de la sombra, direction , para la dirección de la sombra, que es es en grados y gira tomando en cuenta las manecillas de el reloj con punto de partida desde las 12, y de Strength que es la fuerza de la sombra (amplitud).

Recuerda, el código anterior sirve para que se vea el sombreado en el título de tu blog en IE, considerando por supuesto que así este definido en tu plantilla, si no, busca como lo tienes definido y sustitúyelo.



Nota: Para dar sombreado en varias partes de la plantilla a la vez, deberás declarar que parte quieres sombrear, y separar cada una de ellas con una coma.



Ejemplo:



h1 title, .sidebar h2, .post title {el código del hack...}



Cajas con Sombra



¿Sabias que es posible agregar sombra a las cajas o contenedores ?, esto es posible gracias a una propiedad CSS3, las sombras se muestran al estilo photoshop en todo lo que sea un contenedor, ya sea de imagen o de texto.

Para lograr esto, solo agregarás el siguiente código:

.mi-caja-con-sombra {

     -moz-box-shadow: 2px 2px 4px #777;

     -webkit-box-shadow: 2px 2px 4px #777;

      box-shadow: 2px 2px 4px #777;

}

Puedes agregar sombras a prácticamente todo lo que sea una caja, por ejemplo:

• Imágenes de tus posts


• Una galeria de imágenes


• Envoltura de tu plantilla


• Widgets de tus columnas etc., etc.…

Una vez que lo conseguiste, claro para Firefox, Google Chrome y otros navegadores modernos, pensarás, ¿y qué con IE?



Solución: El hack es el mismo que en el de sombra en el texto, y de la misma forma deberás agregar el nombre de la parte que quieres poner sombra en la caja, para que funcione.



Puedes ver todo funcionando en esta plantilla de demostración.





Nota: Para evitar problemas con los filtros es recomendable usar una sola vez el hack para IE y ahí mismo poner todas las partes a las que quieres agregar sombra.



Observación y conclusión:

Como puedes ver,  es posible visualizar las sombras en practicamente todos los navegadores y gracias al hack que te mostre, es posible lograrlo en Internet explorer, sin embargo, y si ustedes lo notaron en el demo, los bordes  de el texto sombreado se ven un poco rugosos y dentados (ojalá se pudiera poner anti-alias, como en photoshop), y esto es mas notorio en las letras que presentan inclinación, por lo que te recomiendo tomarlo en cuenta.



Afortunadamente, las cajas sombreadas no presentan ningun problema :-) por lo que su uso queda ampliamente recomendado..



Fuente: Jon Raasch Blog.