Crear efecto de texto 3D con CSS3

Uno de los efectos que muchos están logrando con CSS3 es el de crear texto en 3D, es decir, con profundidad, sin tener que hacer el efecto en Photoshop  o cualquier editor y luego ponerla como imagen, cosa que ya queda en el pasado.

En este tutorial vamos a ver como crear este efecto, para que lo puedan agregar a su diseño web y sorprender a sus usuarios con sus dotes de CSS3.

Al terminar podemos tener un efecto como éste

Estructura HTML

En primer lugar tenemos la estructura HTML, donde básicamente tenemos todo el texto dentro de una capa principal, que en este caso no es necesario si lo van ya a implementar en su sitio web, pero déjenlo para que conozcan el código.

Hoja de estilos CSS3

Quizá lo importante en este ejemplo es recalcar que tenemos el estilo de la capa principal, que como les decía en un principio, sirve para referenciar bien y englobar las etiquetas que van a tener el efecto 3D.  Después de eso hay estilos para las etiquetas H1 y P, por lo que en un futuro si no quieres que se vea afectada alguna de ellas, basta cambiarlas por una clase o un identificador.

Lo que podemos cambiar del código es el color del texto, las sombras deben permanecer en negro para simular el efecto, así que podemos cambiar la propiedad color:

 

Y eso sería todo, pruébenlo y comprueben el efecto. Si tienen alguna duda o no pudieron insertar el código no duden en escribirme en los comentarios.