Ahora que la mayoría de los navegadores soportan la propiedad text-shadow de CSS3, vamos a ver cómo usarla para crear un interesante efecto de sombra en los textos.
La propiedad text-shadow está soportada en las versiones actuales de Firefox, Chrome, Safari y Opera. En cambio, no es así en Internet Explorer 8, por lo que usaremos Shadow Filter para que también se muestren las sombras en este navegador.
Por otra parte, aunque en la reciente Preview de Internet Explorer 9 que nos ha mostrado Microsoft todavía no se soporta esta propiedad, esperemos que la versión final sí la soporte y podamos usar una única propiedad text-shadow para todos los navegadores.
Para usar este efecto de sombra, añadimos a nuestra hoja de estilos una clase llamada “shadow”, en la que se definen las dos propiedades:
.shadow { text-shadow:#666666 3px 3px 3px; filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4); }
Si no tuviéramos una hoja de estilos en nuestra página web, podemos ponerla en el head de la siguiente manera:
<style type="text/css"> <!-- .shadow { text-shadow:#666666 3px 3px 3px; filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4); } --> </style>
Para aplicar la sombra a un texto dentro del contenido de la página ponemos por ejemplo:
<p class="shadow">Ejemplo de texto con sombra</p>
Y este sería el resultado si le aplicamos la sombra a un texto con formato de título (h4):
Ejemplo de texto con sombra
Después podemos cambiar los valores de la sombra para que quede a nuestro gusto, sin olvidar que tendremos que hacer los cambios en las dos propiedades, intentando que la sombra sea similar en ambos navegadores.
Valores de text-shadow
- Color de la sombra. (Ejemplo: #666666)
- Desplazamiento de la sombra sobre el eje X. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)
- Desplazamiento de la sombra sobre el eje Y. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)
- Cantidad de efecto blur de la sombra. (Ejemplo: 3px)
Más información sobre text-shadow aquí y aquí.
Atributos de Shadow Filter
- Color de la sombra (Ejemplo: color=’#666666′)
- Dirección de la sombra, en grados. Sólo puede tomar los valores: 0, 45, 90, 135, 180, 225, 270, 315. (Ejemplo: Direction=135)
- Extensión de la sombra, en píxeles. (Ejemplo: Strength=4)
Más información sobre Shadow Filter aquí.
Muy buen comentario. Fácil y claro.
Gracias
Me encanta este efecto! Lo llevaba buscando hace un tiempo gracias!
Más claro no podía ser. La explicación es clara, concisa y precisa. Gracias por el aportte.
Gracias por la claridad de la información… 🙂
Lástima que en mi aplicación para un estilo wordpress pre-instalado, en internet explorer 9 saca sombras donde no debe… pero la instrucción es muy clara.
Gracias!
Gran post, me ha servido de mucho y lo he podido aplicar a mi propia landing de registro de SigoJoven, para no tener que hacerlo como imagen de photoshop y así la letra pueda cargarse como información importante de la página. Gracias
Muchas gracias, muy bien explicado.
Hola, estoy usando una google font y no funciona….
Gratzie! Me funcionó perfectamente (es el primero) 🙂