CSS3 finalmente elimina la necesidad de usar Photoshop para añadir un sencillo efecto de sombra al texto. Para ello puedes utilizar la nueva propiedad text-shadow para añadir múltiples sombras al texto. Te mostramos como hacerlo.
La propiedad text-shadow en CSS3 tiene el siguiente formato:
Propiedad CSS3 text-shadow:
text-shadow: 2px 2px 2px #000;
donde los dos primeros valores representan la longitud horizontal y vertical y la tercera un radio opcional de difuminado. Vamos a ver varios ejemplos de uso…
Ejemplo de sombreado sencillo:
text-shadow: 2px 2px 2px #000;
Ejemplo de Sombra con difuminado
Ejemplo de sombreado sencillo sin difuminado:
text-shadow: 2px 2px 0px #000;
Ejemplo de Sombra sin difuminado
Ejemplo de sombreado múltiple:
text-shadow: 0 0 4px blanco, 0-5px 4px #FFFF33, 2px-10px 6PX #FFDD33,-15px 11px-2px #FF8800, 25px 18px-2px #FF2200
Las Sombras Múltiples son HOT
Nota: Usuarios con Webkit (desde Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror o iCab deberían ver los ejemplos con una sombra debajo de este texto.
Gracias a css3.info
Compatible: Codigo CSS, Codigo HTML, Tutoriales
