Thread by @Manz

¡Ojo! ¡Una caja Funko Pop! dibujada en 3D con #CSS!
ManzDev (Twitch Code Streamer) ¡en edición limitada!

Por aquí links:
🐈Repo: github.com/ManzDev/twitch…
👀Demo @CodePen codepen.io/manz/pen/Yzxav…
🎬Video del making-of:

#html #css #javascript #webcomponents

Como curiosidades, hemos diseñado todo sin utilizar imágenes, sólo usamos #CSS para diseñar, y #WebComponents (nativos) para encapsular y reutilizar.

- 11 WebComponents
- 515 líneas totales de Javascript
- 449 líneas totales de CSS

Utilizamos la tipografía «Heroes Legend» para el logo, y la tipografía Bebas Neue para el resto de textos. Nuestra versión se llama «Punko FOP!» (gracias a pbl78 por la idea).

Para generar el proyecto utilizamos `mkweb`. Se trata de un script de generación de proyectos Javascript, que utiliza ViteJS por debajo y crea una estructura de carpetas preconfigurada con linters (JS + CSS) preconfigurados:

Lo explico por aquí:
➡manz.dev/software/mkweb/

El CSS de los componentes está dividido en ficheros para que sea más facil mantener. Con Vite se puede importar desde JS. Al final, decidimos usar WebComponents para organizarlo mejor, pero sin ShadowDOM. En ese caso, la responsabilidad de evitar colisiones recae en las clases.

Quizás lo ideal sería utilizar una librería CSS-in-JS como Linaria, Emotion, Vanilla-extract o Astroturf. En un próximo directo me gustaría ponerme a probarlas a ver cual se adapta mejor a WebComponents y PostCSS.

Puede sorprender a alguno, ya que la imagen pixelada de ManzDev también está hecha íntegramente en CSS, sin usar imágenes.

Se puede hacer relativamente fácil aprovechando el `box-shadow` de CSS:
codepen.io/manz/pen/xxrow…

Para el 3D del ejemplo, no usamos librerías, sino que utilizamos propiedades de CSS como `transform` con rotaciones y translaciones, junto a propiedades como `perspective` o `transform-origin` y `transform-style`:

Por cierto, está vacía, sí... 404

*ba*
*dum*

*tssss*

Logro desbloqueado:

Que los cracks de @CodelyTV te dejen un comentario en el video del stream😁

Por cierto, para la instalación de paquetes de nodeJS llevo un tiempo utilizando `pnpm` (alternativa a npm) y va tremendamente rápido:

pnpm.io