CSS3: Interesantes efectos en texto

La Propiedad Sombras o Shadow.

Esta propiedad fue propuesta desde CSS2 pero como sea esta disponible en CSS3 y es compatible con:

Google Chrome 3+
Mozilla Firefox 3.1+
Opera 9.5+
Safari 3+
[Los que soporten estándares]

La sintaxis de la propiedad es la siguiente:

X-Ofsset: Define si la sombra se muestra a la derecha, valor positivo. O si se muestra arriba, valor negativo.
Y-Ofsset: Define si la sombra se muestra abajo, valor positivo. O si se muestra arriba, valor negativo.
Tamaño: El tamaño de la sombra
Color: Color de la sombra

Con este simple código podemos conseguir un efecto para que el texto parezca grabado en la página con un fondo obscuro, el texto un poco claro y la sombra de texto mas obscuro que los dos colores anteriores:

SantyWeb

El mimsmo efecto con fondo negro, color de letra mas claro, y sombra de texto mas clara que los dos colores anteriores:

SantyWeb

O que parezca que esta por delante de la página, colocando un color de letra claro brillante, un fondo obscuro y una sombra de texto mas obscura que el fondo:

SantyWeb

El mismo efecto pero con fondo negro, color de letra mas claro y sombra de letra mas clara que los dos anteriores:

SantyWeb

Aqui parece que cada letra tiene detrás un reflector, con fondo obscuro, letra clara y sombra de texto blanca:

SantyWeb

Lo mismo pero con un color de letra obscura o del mismo color de fondo:

SantyWeb

Incluso podemos agregarle mas de una sombra, de la siguiente forma parece que le salen un tipo de llamas:

SantyWeb

FUENTE|Line25.com

Rotacion de Texto.

Permite rotar cualquier texto mediante instrucciones de CSS3, es decir, ladearlo, que se incline hacia cualquier lado.

31July2009

Y para Internet Explorer:

FUENTE|Snook.ca

Texto Gradiente o con Textura

El efecto no es en sí propio del CSS, y tampoco es único de CSS3 ya que implementa una serie de atributos que ya aparecían desde CSS2, el efecto se logra colocando una especie de capas, la capa de arriba tiene una imagen PNG que es semi-transparente, mientras que la capa que está por debajo es el texto, que parecerá tomar un efecto atractivamente interesante:

SantyWeb en Gradiente!!

Código HTML:
Código CSS:
Con este mismo método y cambiando la imagen por otra puede conseguirse un efecto en Grunge:

SantyWeb en Grunge!!

Código HTML:
Código CSS:
Que te parece si nos vamos un poco mas silvestres y nos hacemos de una letra estilo Cebra:

SantyWeb

Código HTML:
Código CSS:
Algo mas 2.0? Un gradiente metálico:

SantyWeb Metalico!!

Código HTML:
Código CSS:

Para que este recurso se vea bien es necesario que el fondo del texto sea del mismo color que la imagen PNG semitransparente.

Para que se pueda visualizar en Internet Explorer 6.0 es necesario colocar esto:



Pack de Imagenes

FUENTES|JankoAtWarpSpeed|WebdesignerWall|CssGlobe