Labs · Then & now

Then & now.

2012 haben wir diese Stücke in handgeschriebenem CSS3 gezeichnet. 2026 haben wir sie noch einmal gezeichnet: einmal in HTML & CSS mit allem, was wir seitdem gelernt haben, und einmal in 3D, in Code mit Blender modelliert. Dieselben Motive, vierzehn Jahre auseinander.

← Zurück zu den Labs

Superman

3 Versionen
CSS Superman
2012 · CSS3-Original · In 1 Tag entstanden

CSS Superman

Aus einer Serie von Superhelden in HTML & CSS.
Superman, gerendert
2026 · Gerendert · HTML & CSS

Superman, gerendert

Ein detailreiches Porträt in reinem HTML & CSS: der Superman von 2012, neu gemacht.
Superman, 3D
2026 · 3D · Blender & three.js

Superman, 3D

Eine in Code mit Blender modellierte Büste, live in three.js beleuchtet; ziehen zum Drehen.

Batman

3 Versionen
CSS Batman
2012 · CSS3-Original · In 1 Tag entstanden

CSS Batman

Aus einer Serie von Superhelden in HTML & CSS.
Batman, gerendert
2026 · Gerendert · HTML & CSS

Batman, gerendert

Ein detailreicher Batman in reinem HTML & CSS, samt Bat-Signal.
Batman, 3D
2026 · 3D · Blender & three.js

Batman, 3D

Eine Büste mit Maske, in Code mit Blender modelliert, auf einem Dach in Gotham im Regen; gedrückt halten für das Bat-Signal.

Wolverine

3 Versionen
CSS Wolverine
2012 · CSS3-Original · In 1 Tag entstanden

CSS Wolverine

Aus einer Serie von Superhelden in HTML & CSS.
Wolverine, gerendert
2026 · Gerendert · HTML & CSS

Wolverine, gerendert

Der Wolverine von 2012 in reinem HTML & CSS: Fauchen im Gewitterlicht, SNIKT-Krallen.
Wolverine, 3D
2026 · 3D · Blender & three.js

Wolverine, 3D

Eine in Code mit Blender modellierte Büste, live in three.js beleuchtet; gedrückt halten und die Krallen fahren SNIKT aus.

Spider-Man

3 Versionen
CSS Spider-Man
2012 · CSS3-Original · In 1 Tag entstanden

CSS Spider-Man

Aus einer Serie von Superhelden in HTML & CSS.
Spider-Man, gerendert
2026 · Gerendert · HTML & CSS

Spider-Man, gerendert

Maske und Anzug mit Netzmuster zur blauen Stunde, in reinem HTML & CSS; verschieß ein Netz.
Spider-Man, 3D
2026 · 3D · Blender & three.js

Spider-Man, 3D

Eine in Code mit Blender modellierte Büste, hoch über New York in der Dämmerung; gedrückt halten, um ein Netz zu verschießen.

Iron Man

3 Versionen
CSS Iron Man
2012 · CSS3-Original · In 1 Tag entstanden

CSS Iron Man

Aus einer Serie von Superhelden in HTML & CSS.
Iron Man, gerendert
2026 · Gerendert · HTML & CSS

Iron Man, gerendert

Polierte Rüstung in Rot & Gold in reinem HTML & CSS, mit einem Arc-Reaktor, der hochfährt.
Iron Man, 3D
2026 · 3D · Blender & three.js

Iron Man, 3D

Hard-Surface-Rüstung, in Code mit Blender modelliert; gedrückt halten, um den Unibeam aufzuladen.

Hulk

3 Versionen
CSS Hulk
2012 · CSS3-Original · In 1 Tag entstanden

CSS Hulk

Aus einer Serie von Superhelden in HTML & CSS.
Hulk, gerendert
2026 · Gerendert · HTML & CSS

Hulk, gerendert

Ein gewaltiges Porträt in reinem HTML & CSS: der Hulk von 2012, neu gemacht.
Hulk, 3D
2026 · 3D · Blender & three.js

Hulk, 3D

Eine gewaltige Büste, in Code mit Blender modelliert; gedrückt halten, um ihn wütend zu machen.

R2-D2

3 Versionen
CSS R2-D2
2012 · CSS3-Original · In 4 Tagen entstanden

CSS R2-D2

Roboter-Illustration in HTML & CSS.
R2-D2, gerendert
2026 · Gerendert · HTML & CSS

R2-D2, gerendert

R2-D2 in reinem HTML & CSS auf Tatooine in der Dämmerung; gedrückt halten zum Piepen.
R2-D2, 3D
2026 · 3D · Blender & three.js

R2-D2, 3D

R2-D2 als Hard-Surface-3D, in Code mit Blender gebaut, auf Tatooine; gedrückt halten, dann piept er und projiziert ein Hologramm.

Game & Watch

3 Versionen
CSS Game & Watch
2012 · CSS3-Original · In 1 Woche entstanden

CSS Game & Watch

Responsive Illustration eines klassischen Handhelds.
Game & Watch, gerendert
2026 · Gerendert · HTML & CSS

Game & Watch, gerendert

Ein spielbares LCD-Spiel in drei responsiven Geräten: Game & Watch, Game Boy, Mini Classic.
Game & Watch, 3D
2026 · 3D · Blender & three.js

Game & Watch, 3D

Der Handheld, in Blender modelliert, mit spielbarem LCD; drück seine Tasten oder nutze die Pfeiltasten.