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 valoresPuedes 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.
