Photoshop y Tutoriales

Etiquetas: 3d, css3, html5, texto 3d, texto 3d con css3

Sin photoshop, sin imagenes, sin programas 3D, puro CSS3, en este minitutorial veremos como crear texto 3D utilizando unas lineas de CSS3.

El truco está en añadir sombras simultáneas al texto que coloquemos dentro de las etiquetas H1, aqui el codigo para crear texto 3D utlizando CSS3:
h1 {
text-align:center;
font-size:120px;
line-height:120px;
color: #fff;
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);
}

Pero con agregar esas lineas de CSS3 a tu documento no basta, primero debes trabajar tu documento como HTML5, para ello hay que empezar definiendo el documento que vamos a trabajar, y utilizar las nuevas etiquetas que el lenguaje pone a nuestra disposición, pero para que te sea mas fácil aqui te dejo el código completo de la pagina, haz clic en la imagen para ampliar:

Ver Demo, en el Demo puedes ver el codigo fuente de la pagina para que inicies desde ahi a crear el texto 3d con CSS3 y observes la estructura del HTML5.

Este tutorial es una adaptación que realicé del post original escrito en dizajnmagazin.com, además para la estructura del html5 utilicé este tutorial.

Espero que te sea de utilidad el mini tutorial para crear texto 3D con puro CSS3. Los comentarios son bienvenidos.