Juan Manuel 12 de agosto de 2008 a las 15.00
   Imprimir artículo
elWebmaster.com

Agregar efectos de dise├▒o al texto de tu sitio web con CSS


Si eres un fan├ítico del dise├▒o, te romper├ís la cabeza pensando c├│mo hacer para darle efectos a las tipograf├şas de tu blog, en los t├ştulos de las entradas por ejemplo, o en cualquier otra parte. En teor├şa, el trabajo con tipograf├şa es bastante “limitado” (a nivel dise├▒o) en CSS.

┬┐Para qu├ę estamos en elWebmaster.com? ┬íPara solucionarte la vida ^_^, claro! Bueno, con este tutorial aprender├ís a aplicar algunos bonitos efectos de dise├▒o gr├ífico al texto de tu sitio web. ┬íComencemos!

Efectos de dise├▒o en el texto de tu sitio con CSS

Bueno, la idea principal es crear una imagen transparente con alg├║n “efecto” o marca del mismo color que el fondo de nuestro sitio. Luego tendremos que superponer esa imagen sobre el texto para crear una especie de m├íscara que dejar├í ver el texto. Vamos a los ejemplos gr├íficos para que se entienda:

Esta imagen es la “m├íscara”. Como pueden ver la he guardado como .png (necesitaremos incluir PNGfix para que lo tome IE).

Luego de acomodar el CSS y HTML (m├ís abajo veremos c├│mo) nos quedar├í la “m├íscara” superpuesta en el texto. Ej:

¿Ahora se entiende? La máscara, al tener el mismo color que el fondo sólo se reconoce en el texto ^_^.

El c├│digo HTML

La idea es que, dentro del t├ştulo (por ejemplo <h1>) creemos un <span> vac├şo, donde luego, mediante CSS le pondremos la imagen de fondo:

<h1>Este es un ejemplo de texto con efecto<span></span></h1>

Estilos CSS: “gracias por la magia”

Vamos a usar posicionamiento absoluto (el<span>) dentro de un posicionamiento relativo (el <h1>). As├ş, el fondo del span se superpondr├í al h1 ^_^.

body {
background-color:#000000;
color:#ffffff;
font-family: Arial;
}

a{
color:#35cbda;
}

h1 {
position:relative;
font-size:48px;
font-weight:lighter;
color: #FF6600;
font-family: Georgia;
}

h2 {
position:relative;
font-family: Arial;
font-weight:lighter;
color: #FFCC33;
}

h1 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(mascara.png);
}

h2 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:100%;
background:url(mascara.png);
}

¡Listo! Sólo para maniáticos XD!

No hay l├şmites con CSS

El ├║nico l├şmite es nuestra creatividad. Te dejo unos ejemplos para que veas lo que se puede hacer:

¡Espero que te sirva de mucho!


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. berenice dice:

    muy buen consejo! gracias!! *-*

  2. Karkanos dice:

    muy bueno gracias ­čśÇ

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder