En 2012 el CSS3 era tan nuevo que parecía un truco. Los degradados, las esquinas redondeadas y las transformaciones acababan de llegar a todos los navegadores, y queríamos saber hasta dónde llegaban. Así que dibujamos con ellos: una serie de superhéroes (Superman, Batman, Wolverine, Spider-Man, Iron Man y Hulk), después R2-D2 y después una Game & Watch de Donkey Kong Jr. Sin imágenes, sin canvas, solo cajas, bordes y degradados apilados hasta que parecían algo.
Cada héroe llevó más o menos un día. R2-D2 llevó cuatro. La Game & Watch llevó una semana, porque no pudimos resistirnos a hacerla responsive.
Este año volvimos a los ocho. El encargo que nos hicimos era sencillo: los mismos personajes, con catorce años de diferencia, y sin descuento por nostalgia. Cada uno se rehízo dos veces, en dos medios muy distintos, y puedes ver las tres versiones una al lado de otra en Antes y ahora.
Dos versiones, dos reglamentos
Renderizado es el descendiente directo de los originales: HTML y CSS puros, todavía sin imágenes, sin SVG y sin canvas. Lo que ha cambiado es todo lo que rodea a las reglas. El CSS moderno nos da degradados en capas con mezcla de color real, clip-path para siluetas orgánicas, modos de fusión, filtros para la luz suave y propiedades personalizadas que permiten que un valor mueva todo un personaje. Los héroes de 2012 eran recortes planos. Los de 2026 tienen luz esculpida, trajes con textura y clima.
3D tira el reglamento por la ventana. Cada pieza se esculpe con código usando la API de Python de Blender, se exporta como un único archivo de modelo y se ilumina en directo en el navegador con three.js. Puedes arrastrarlas para girarlas, y todas hacen algo cuando mantienes pulsado.
Los mismos personajes, con catorce años de diferencia, y sin descuento por nostalgia.
Cada pieza hace algo
Un dibujo que solo se puede mirar nos parecía una oportunidad perdida, así que cada versión tiene una idea con la que puedes jugar:
- La visión calorífica de Superman sigue tu puntero y quema donde cae.
- Batman espera en una azotea bajo la lluvia; mantén pulsado y la batiseñal ilumina las nubes.
- Las garras de Wolverine salen, con el efecto de sonido a juego.
- Spider-Man lanza una telaraña.
- Iron Man carga su repulsor y su unirrayo, y su placa facial se levanta para mostrar a Tony debajo.
- Hulk se mantiene tranquilo hasta que mantienes pulsado, y entonces ruge.
- R2-D2 pita, y en 3D proyecta un holograma.
- La Game & Watch se puede jugar: un juego LCD en tres dispositivos, la Wide Screen original, una Game Boy y un llavero Mini Classic.
Son cosas pequeñas, pero son la diferencia entre una ilustración y una pieza de software, y lo que hacemos es software.
Qué han cambiado catorce años
La respuesta honesta es: menos sobre el CSS que sobre cómo trabajamos. En 2012 cada degradado era una suposición, refrescada y retocada hasta que quedaba bien. En 2026 podíamos ver que un detalle estaba mal, describir por qué y arreglar la causa. Cuando las lentes de Spider-Man parecían descentradas, el motivo no era el dibujo: una lente era una copia en espejo de la otra, volteada alrededor de un pivote descentrado. El arreglo fue un número.
Las piezas 3D enseñaron la misma lección a mayor escala. Esculpir una cara solo con código es difícil, y nuestras primeras cabezas eran toscas. En lugar de pelear contra eso, partimos de las mallas humanas base gratuitas y CC0 de Blender Studio y las remodelamos con scripts para cada personaje. Las manos siguieron el mismo camino. Escribimos más sobre ese proceso en Esculpir superhéroes con código en Blender.
Una vitrina de museo para todas
Ocho piezas en dos medios es mucho que asimilar, así que la parte superior de Antes y ahora es una vitrina de museo: las ocho piezas 3D como pequeñas estatuas sobre una plataforma que gira despacio, cada una bajo su propio foco. Las estatuas son versiones ligeras de los modelos completos, que se cargan solo cuando la página está inactiva, así que la vitrina no cuesta casi nada antes de que bajes. Haz clic en una y saltas directamente a su fila, donde el original de 2012 está junto a las dos versiones nuevas.
También hay un secreto. Si conoces el código, pruébalo.
Para qué molestarse
Labs siempre ha sido donde probamos cosas antes de necesitarlas. Los héroes de 2012 nos enseñaron lo que podía hacer el CSS años antes de usar esas técnicas en trabajos para clientes. Las versiones de 2026 hicieron lo mismo con el 3D procedural, la iluminación en tiempo real y la construcción de piezas interactivas que siguen cargando rápido en un móvil. La próxima vez que un cliente necesite algo que se mueva, ya sabremos dónde están los límites.
Echa un vistazo a toda la colección, o empieza por el Superman 3D y mantén pulsado.