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

Estas en: > > CSS3: Efecto 3D en Texto

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!
Por: Unknown
En que se publicó
Etiquetas , ,
#

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:

7 comentarios !

ReverieM dijo...

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 ;-)

Unknown dijo...

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

Saludos

No Solo Moda dijo...

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!

Luis Torres dijo...

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

José Guadalupe Martínez Cruz dijo...

P: por lo que veo solo son sombras amontonadas xD

Anónimo dijo...

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

Roger Chang Guzmán dijo...

Gracias, qué útil e interesante.


Página Principal
Arriba