Crear forma CSS 3D con facilidad usando Tridiv

¿Alguna vez ha trabajado con 3D en la web? Si es así, entonces probablemente esté familiarizado con WebGL (Web Graphics Library), una API de JavaScript destinada a la representación de gráficos 3D y 2D en su navegador web sin el uso de complementos. En este post, presentamos Tridiv, una aplicación web gratuita para crear formas CSS 3D con facilidad.

Si está familiarizado con Blender, una de las aplicaciones de modelado de escritorio 3D más populares, Tridiv es la aplicación para la web. Está construido sobre bibliotecas populares como Animate.css, Hint.css, PrefixFree, Photon, Mousetrap y más.

Visión de conjunto

Desafortunadamente, esta aplicación solo es para navegadores basados ​​en Webkit, lo que significa que solo es compatible con Chrome, Safari y Opera 15+ . Esperemos que llegue pronto a Firefox.

Para empezar, Tridiv viene con tres tipos de formas 3D. A continuación hay ejemplos de formas básicas, medianas y avanzadas. Como puede ver, el nivel de dificultad depende de la cantidad de formas y caras que haya . Cuanto mayor es el número, más difícil se vuelve.

Para ver lo que hay adentro, comencemos cargando la forma básica del iPhone 4S. Luego será llevado a la página Editor. En Tridiv, hay dos páginas principales: Editor y Vista previa . Puede trabajar en la creación de formas en el modo Editor y luego desarrollarlas con las numerosas herramientas disponibles en el modo Vista previa.

Trabajando con el editor

A primera vista, la página Editor parece una versión simplificada de Blender. Con todas las herramientas ubicadas solo a la derecha y en la parte superior, Tridiv se enfoca en el editor de interfaz de cuatro paneles. La interfaz muestra el ángulo de la forma desde las vistas superior, frontal y lateral. Dentro de los diferentes paneles, puede rotar, editar, duplicar y eliminar la forma.

En la parte superior derecha de la página, hay controles de administración de proyectos para cambiar el nombre, guardar, abrir y crear proyectos nuevos. Cuando guarde el proyecto, se almacenará localmente en su computadora. El documento guardado se puede usar en el futuro con la función Abrir proyecto.

Las principales características de la creación de formas se encuentran justo al lado de los controles de gestión del proyecto. Para crear un objeto 3D genial, debes jugar con todas las formas diferentes: cuboide, cilindro, prisma y pirámide. Con la combinación de forma correcta y la edición con la herramienta de selección Mover y editar, puede crear la forma deseada.

Configuraciones adicionales como propiedades de Documento y Forma, y ​​estilos están disponibles en el lado derecho del documento. Se muestran más opciones para estos después de seleccionar la forma que ha agregado.

Modo de vista previa

El modo de vista previa es donde puede finalizar el diseño. No puede editar aquí y solo podrá retocar la forma para que se vea perfecta para su sitio web.

Todas las herramientas para hacer que su forma sea elegante están en el panel derecho, puede agregar iluminación, bordes y cambiar el color de fondo . Si desea mostrar su diseño, un código de inserción está disponible en la página superior. Simplemente copie y pegue el código en su sitio web.

Mientras edita, Tridiv también genera HTML y CSS a medida que avanza permitiéndole usar la forma sin iframe. También puede editar el código dentro de Tridiv o más en CodePen.

Pensamientos finales

De hecho, Tridiv es la única aplicación de gran alcance para el editor CSS 3D en la web hasta el momento. Sin embargo, actualmente hay una falta de documentación y tutoriales . Llevará algún tiempo entender cómo usar la herramienta. No obstante, sigue siendo una aplicación increíble y útil que está dirigida solo por un hombre, Julian Garnier.

Una buena forma de utilizar Tridiv es crear logotipos animados, como el que ve en su página de inicio, y elementos simples de la interfaz de usuario. Entonces cuéntanos qué construirías con esta herramienta.

Cómo la iluminación afecta tu estado de ánimo [Infografía]

¿Se cansa mucho, tiene dolor en los ojos o tiene dolores de cabeza y algunas veces se siente deprimido? Puede que no lo sepas, pero esto puede deberse a la iluminación de tu entorno. La mayoría de nosotros probablemente vivimos nuestras vidas en interiores, frente a una pantalla en lugar de afuera, bajo el calor del sol.Ta

(Consejos de tecnología y diseño)

Crea listas de reproducción de Spotify con tus amigos en Facebook Messenger

¿Alguna vez has deseado poder crear una lista de reproducción de Spotify con tus amigos? Si eres un usuario de Facebook Messenger, ahora puedes hacerlo a medida que Spotify ha desplegado una función de lista de reproducción grupal para la aplicación de chat .Accesible a través de la extensión Spotify de Messenger, la nueva función de listas de reproducción grupales te permitirá a ti y a tus amigos crear una lista de reproducción unificada . Una vez q

(Consejos de tecnología y diseño)