Laboratório · Antes & agora

Antes & agora.

Em 2012 desenhamos estas peças em CSS3 escrito à mão. Em 2026 as desenhamos de novo: uma vez em HTML & CSS, com tudo o que aprendemos desde então, e outra em 3D, esculpidas em código com o Blender. Os mesmos temas, catorze anos depois.

← Voltar ao laboratório

Superman

3 versões
Superman em CSS
2012 · Original em CSS3 · Feito em 1 dia

Superman em CSS

De uma série de super-heróis em HTML & CSS.
Superman, renderizado
2026 · Renderizado · HTML & CSS

Superman, renderizado

Um retrato detalhado em HTML & CSS puros: o Superman de 2012, refeito.
Superman, 3D
2026 · 3D · Blender & three.js

Superman, 3D

Um busto esculpido em código com o Blender, iluminado ao vivo em three.js; arraste para girar.

Batman

3 versões
Batman em CSS
2012 · Original em CSS3 · Feito em 1 dia

Batman em CSS

De uma série de super-heróis em HTML & CSS.
Batman, renderizado
2026 · Renderizado · HTML & CSS

Batman, renderizado

Um Batman detalhado em HTML & CSS puros, com bat-sinal e tudo.
Batman, 3D
2026 · 3D · Blender & three.js

Batman, 3D

Um busto de capuz esculpido em código com o Blender, num telhado de Gotham sob a chuva; segure para acender o bat-sinal.

Wolverine

3 versões
Wolverine em CSS
2012 · Original em CSS3 · Feito em 1 dia

Wolverine em CSS

De uma série de super-heróis em HTML & CSS.
Wolverine, renderizado
2026 · Renderizado · HTML & CSS

Wolverine, renderizado

O Wolverine de 2012 em HTML & CSS puros: rosnado à luz da tempestade, garras em SNIKT.
Wolverine, 3D
2026 · 3D · Blender & three.js

Wolverine, 3D

Um busto esculpido em código com o Blender, iluminado ao vivo em three.js; segure e as garras saem em SNIKT.

Spider-Man

3 versões
Homem-Aranha em CSS
2012 · Original em CSS3 · Feito em 1 dia

Homem-Aranha em CSS

De uma série de super-heróis em HTML & CSS.
Homem-Aranha, renderizado
2026 · Renderizado · HTML & CSS

Homem-Aranha, renderizado

Máscara e traje de teia na hora azul, em HTML & CSS puros; dispare uma teia.
Spider-Man, 3D
2026 · 3D · Blender & three.js

Spider-Man, 3D

Um busto esculpido em código com o Blender, no alto de Nova York ao entardecer; segure para disparar uma teia.

Iron Man

3 versões
Homem de Ferro em CSS
2012 · Original em CSS3 · Feito em 1 dia

Homem de Ferro em CSS

De uma série de super-heróis em HTML & CSS.
Homem de Ferro, renderizado
2026 · Renderizado · HTML & CSS

Homem de Ferro, renderizado

Armadura vermelha e dourada polida em HTML & CSS puros, com reator arc que ganha energia.
Iron Man, 3D
2026 · 3D · Blender & three.js

Iron Man, 3D

Armadura de superfície rígida esculpida em código com o Blender; segure para carregar o unifeixe.

Hulk

3 versões
Hulk em CSS
2012 · Original em CSS3 · Feito em 1 dia

Hulk em CSS

De uma série de super-heróis em HTML & CSS.
Hulk, renderizado
2026 · Renderizado · HTML & CSS

Hulk, renderizado

Um retrato imponente em HTML & CSS puros: o Hulk de 2012, refeito.
Hulk, 3D
2026 · 3D · Blender & three.js

Hulk, 3D

Um busto imponente esculpido em código com o Blender; segure para deixá-lo bravo.

R2-D2

3 versões
R2-D2 em CSS
2012 · Original em CSS3 · Feito em 4 dias

R2-D2 em CSS

Ilustração de robô em HTML & CSS.
R2-D2, renderizado
2026 · Renderizado · HTML & CSS

R2-D2, renderizado

O R2-D2 em HTML & CSS puros em Tatooine ao entardecer; segure para ele apitar.
R2-D2, 3D
2026 · 3D · Blender & three.js

R2-D2, 3D

O R2-D2 em 3D de superfície rígida, construído em código com o Blender, em Tatooine; segure e ele apita e projeta um holograma.

Game & Watch

3 versões
Game & Watch em CSS
2012 · Original em CSS3 · Feito em 1 semana

Game & Watch em CSS

Ilustração responsiva de um portátil clássico.
Game & Watch, renderizado
2026 · Renderizado · HTML & CSS

Game & Watch, renderizado

Um jogo de LCD jogável em três aparelhos responsivos: Game & Watch, Game Boy, Mini Classic.
Game & Watch, 3D
2026 · 3D · Blender & three.js

Game & Watch, 3D

O portátil modelado no Blender com uma tela LCD jogável; aperte os botões ou use as setas do teclado.