Live Coding Video – Archivador 3D con CSS

Hace un par de años publiqué un par de videos de codificación en vivo, el primero con una figura imposible y el segundo con un patrón teselado. Hoy publico un nuevo video, esta vez con una figura 3D creada para el primero de los Codepen Challenges de este mes, Files, donde hay que experimentar con las nuevas opciones de archivo en el Editor 2.0 lanzado hace unos meses.

En el reto proponen, por ejemplo, crear un archivador con CSS o SVG y por ahí he tirado yo, algo que pensé hace tiempo y que este mes me lo han puesto a huevo en Codepen.

Aunque me hubiera gustado tener más tiempo para pulir más algunos detalles, como los sombreados o los fondos, al final se acababa el reto y como además tenía que editar el video y todo eso pues lo he dejado tal cual, eso no quita para que en un futuro retoque el archivador, aunque esos cambios no se verán en el video que os muestro a continuación.

3D Filing Cabinet – CSS

En el video, inicialmente monto el sistema de cuboides que tantas veces he utilizado creado por @jh3y y que podéis ver aquí: CSS Cuboid Generator.

Después creo el archivador y los cajones con el sistema de cuboides.

Tras esto meto unas carpetas de archivos dentro de cada cajón.

Para acabar, añado unos sombreados, un fondo degradado, y la sombra del archivador, pero como decía antes espero poder mejorar esta última parte si un día de estos saco algo de tiempo para ello.

El resultado

Añado por aquí el archivador creado en Codepen ya finalizado:

See the Pen 3D Filing Cabinet – CSS por Josetxu (@josetxu) en CodePen.

Le empiezo a coge el gustillo a esto de grabar videos, puede que no tarde tanto en publicar alguno más…