Páginas

31 mayo 2011

CSS3: Efecto 3D en Texto

Una de los puntos fuertes de este mejorado CSS3, es sin duda y entre otras cosas el aspecto del texto. Ya que mediante esta herramienta, podemos fácilmente manipular el aspecto del texto sin necesidad de utilizar imágenes. Por ejemplo, aplicar un efecto 3D en algún texto:

Texto 3D

Esto se logra gracias a la nueva propiedad 'text-shadow' que ya es soportada oficialmente en CSS3, es decir, que es compatible con los navegadores de última generación.

[1] Para agregarlo, debes entrar en Diseño>Edicion HTML>Sin expandir plantillas de artilugios.

[2] Buscar con 'Ctrl+F': ]]></b:skin>

[3] Y agregar el siguiente código justo antes de ]]></b:skin>:
.3d {
  color:white;
  font-weight:bold;
  font-size:25px;
  text-shadow: 0 1px 0 #ccc, 
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  0 6px 1px rgba(0,0,0,.1),
  0 0 5px rgba(0,0,0,.1),
  0 1px 3px rgba(0,0,0,.3),
  0 3px 5px rgba(0,0,0,.2),
  0 5px 10px rgba(0,0,0,.25),
  0 10px 10px rgba(0,0,0,.2),
  0 20px 20px rgba(0,0,0,.15);
}
Ahora cada vez que quieras que un texto luzca con un efecto en 3D, solo agregalo de la siguiente manera:
<span class='3d'>Aqui el texto 3D</span>
El resultado será algo como esto:
Efecto 3D!
Ó esto:
Efecto 3D!
Dependiendo del color que prefieras!

7 comentarios:

  1. Wow, esto, junto con lo del redimensionado de imagenes, van a ser de mucha ayuda de ahora en adelante, ademas que lo explicaste, Santy. Gracias por el aporte ;-)

    ResponderBorrar
  2. ReverieM, de nada :P sigue pasandote y comentando ;)!

    Saludos

    ResponderBorrar
  3. Hola amigo, en mi blog no funciona. Seguí las instrucciones al pie de la letra pero el texto me sale normal ¿Que puede pasar?

    muchas gracias por tu blog!

    ResponderBorrar
  4. Hola...No me funciono.....agregue el codigo en una entrada nueva en formato html, y me salio el texto Normal.

    ResponderBorrar
  5. P: por lo que veo solo son sombras amontonadas xD

    ResponderBorrar
  6. Ya lo hice pero solo se ve un simple texto, use los navegadores firefox y chrome
    por que pasa eso? que me falta

    ResponderBorrar

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