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!
Lunes, 25 de Agosto de 2008 a las 15.58
muy buen consejo! gracias!! *-*
Jueves, 18 de Febrero de 2010 a las 02.11
muy bueno gracias