Hacker of the Web
Tus ideas en código!...y mas

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:

Text-shadow

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

color: #111;
text-shadow: 0px 2px 3px #555;


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

SantyWeb

color: #666;
text-shadow: 0px 1px 0px #ccc;


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

color: #999;
text-shadow: 0px 3px 8px #2a2a2a;


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

SantyWeb

color: #999;
text-shadow: 0px 3px 8px #2a2a2a;


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

SantyWeb

color: #EEE;
text-shadow: 0px 0px 7px #FFF;


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

SantyWeb

color: #EEE;
text-shadow: 0px 0px 7px #FFF;


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

SantyWeb

color: #999;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
background:#000;


FUENTE|Line25.com

Rotacion de Texto.

Permite rotar cualquier texto mediante instrucciones de CSS3, es decir, ladearlo, que se incline hacia cualquier lado.
31July2009
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

Y para Internet Explorer:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


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:
<p> Texto en Gradiente!!<span></span> </p>

Código CSS:
 p {
position:relative
}
span {
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(imagenGradiente.png) top center repeat-x;
}

Con este mismo método y cambiando la imagen por otra puede conseguirse un efecto en Grunge:

SantyWeb en Grunge!!

Código HTML:
<p> Texto en Gradiente!!<span></span> </p>

Código CSS:
 p {
position:relative
}
span {
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(imagenGrunge.png) top center;
}

Que te parece si nos vamos un poco mas silvestres y nos hacemos de una letra estilo Cebra:

SantyWeb

Código HTML:
<p> Texto en Gradiente!!<span></span> </p>

Código CSS:
 p {
position:relative
}
span {
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(imagenCebra.png) top center;
}

Algo mas 2.0? Un gradiente metálico:

SantyWeb Metalico!!

Código HTML:
<p> Texto en Gradiente!!<span></span> </p>

Código CSS:
 p {
position:relative
}
span {
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(imagenGradienteMetal.png) bottom center;
}

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:
<!--[if lt IE 7]>
<style>
span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradientGrunge.png', sizingMethod='scale');
}
</style>

<![endif]-->



Pack de Imagenes

FUENTES|JankoAtWarpSpeed|WebdesignerWall|CssGlobe
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

2 comentarios !

LILIT dijo...

tambien ayudas con problemas de blogs?
como que no parece reconocerme? imagino que no reconoce mi cuenta....

Ivan dijo...

Gracias por los códigos!! Me vienen genial .. y hay muchos que los desconocía.
Saludos


Página Principal
Arriba