CSS3d, para crear cintas 3D con CSS

css3D

Es interesante como cada vez hay más aplicaciones que nos permiten hacer algunos efectos muy vistosos usando CSS3 sin la necesidad de que sepamos realmente qué hacer.

Uno de esos sitios es CSS3d, un sitio que nos permite crear cintas 3D, usando hojas de estilos como aquellas que salen del borde de algunos sitios web y que tienen la apariencia de que se ocultan detrás. Pues bueno, vamos a ver cómo podemos modificar nuestra propia cinta 3D y colocarla en nuestro blog o sitio web.

.1. Elige el tipo de cinta

Lo primero que tenemos que hacer y que veremos al principio es el estilo de cinta 3D que vamos a usar, podemos seleccionar cualquier de las 4 que vemos en la imagen. Basta con dar clic en alguna para pasar al siguiente paso.

2. Personalizar cinta

El segundo paso es personalizar nuestra cinta, y aunque después de ver muchos cuadros no sepamos qué hacer, siempre tenemos a la vista un esquema general de la composición de la cinta a la derecha, donde podemos ver números y letras que podemos ubicar en los campos, puesto que también ellos están marcados. Entonces simplemente vamos a especificar elementos como el ancho de frente, o el número 1, el normal es 100px pero dependiendo de tu diseño lo puedes hacer más ancho. En cuanto al color podemos seleccionar en A,B,C y D los colores para darle una tridimensionalidad, o dejarlos como está. De los demás valores les recomiendo no tocarlos hasta que logremos saber para qué sirve cada uno.

3. Visualización y código

Cuando le demos clic al botón azul de “Generate” nos va a actualizar la página con una vista previa de cómo se vería nuestra cinta 3D cuando le peguemos el código HTML y CSS3. Entonces, vamos a ver cómo pegar el código.

En primer lugar tenemos el código HTML, este lo vamos a colocar después de la etiqueta <body>, o si quieres puedes ponerla en el lugar donde quieras, pero que esté dentro de esta etiqueta. El mismo código nos dice donde podemos escribir para agregarle texto a la cinta, de lo demás es recomendable no tocarlo.

Lo segundo es CSS3, el código ya nos lo dan listo para colocarlo dentro de la etiqueta <head>, y si quieres ser más específicos les recomiendo crear la etiqueta <style> y dentro de ella peguen el código, no olviden cerrarla con </style>