jueves, 1 de abril de 2010

Añadir sombras a un texto en un blog de Blogger

 Para añadir sombras a un texto insertado en un blog de Blogger hay que utilizar la propiedad text-shadow en el elemento deseado del código de las Hojas de Estilo (CSS) de nuestra plantilla. Esta propiedad se define con cuatro parámetros, de esta forma: text-shadow: coordenadaX coordenadaY amplitud color;

 La coordenadaX (o offset-x) indica el desplazamiento horizontal de la sombra con respecto al texto en cuestión (valor positivo hacia la derecha y negativo hacia la izquierda); la coordenadaY (o offset-y) indica el desplazamiento vertical de la sombra con respecto al texto (valor positivo hacia abajo y negativo hacia arriba); amplitud (o blur-radius) es el tamaño de la sombra: a mayor valor, el efecto de desenfoque también será mayor; color es el color de la sombra.

 El gran problema que se nos presenta es que esto tan sólo funciona en los navegadores Safari, Opera y Firefox. Para que funcione con Internet Explorer hay que utilizar un filtro (progid:DXImageTransform.Microsoft.Shadow).

 He aquí un ejemplo de código para añadir sombras a un texto (en este caso en el footer):
#footer {
  width: 100%;
  line-height: 1.6em;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: none;
  text-shadow: 2px 1px 5px #36393d;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#36393d, direction=135, strength=5);
}

No hay comentarios: