ラボ · Then & now

Then & now.

2012年、私たちはこれらを手書きのCSS3で描きました。2026年、もう一度描き直しました。その後に学んだすべてを注いだHTML & CSSで一度、Blenderでコードから造形した3Dで一度。同じ題材を、14年の時を隔てて。

← ラボに戻る

Superman

3つのバージョン
CSS Superman
2012 · CSS3オリジナル · 制作期間1日

CSS Superman

HTML & CSSで描いたスーパーヒーローのシリーズから。
Superman、レンダリング版
2026 · レンダリング · HTML & CSS

Superman、レンダリング版

純粋なHTML & CSSで描いた精緻なポートレート。2012年のSupermanをリメイク。
Superman、3D
2026 · 3D · Blender & three.js

Superman、3D

Blenderでコードから造形し、three.jsでリアルタイムにライティングした胸像。ドラッグで回転。

Batman

3つのバージョン
CSS Batman
2012 · CSS3オリジナル · 制作期間1日

CSS Batman

HTML & CSSで描いたスーパーヒーローのシリーズから。
Batman、レンダリング版
2026 · レンダリング · HTML & CSS

Batman、レンダリング版

純粋なHTML & CSSで描いた精緻なBatman。バットシグナルも。
Batman、3D
2026 · 3D · Blender & three.js

Batman、3D

雨のゴッサムの屋上に立つ、Blenderでコードから造形したマスクの胸像。長押しでバットシグナル。

Wolverine

3つのバージョン
CSS Wolverine
2012 · CSS3オリジナル · 制作期間1日

CSS Wolverine

HTML & CSSで描いたスーパーヒーローのシリーズから。
Wolverine、レンダリング版
2026 · レンダリング · HTML & CSS

Wolverine、レンダリング版

純粋なHTML & CSSで描いた2012年のWolverine。嵐に照らされた唸り声と、SNIKTと飛び出す爪。
Wolverine、3D
2026 · 3D · Blender & three.js

Wolverine、3D

Blenderでコードから造形し、three.jsでリアルタイムにライティングした胸像。長押しで爪がSNIKTと飛び出します。

Spider-Man

3つのバージョン
CSS Spider-Man
2012 · CSS3オリジナル · 制作期間1日

CSS Spider-Man

HTML & CSSで描いたスーパーヒーローのシリーズから。
Spider-Man、レンダリング版
2026 · レンダリング · HTML & CSS

Spider-Man、レンダリング版

ブルーアワーのウェブ柄のマスクとスーツを、純粋なHTML & CSSで。ウェブを放ってみてください。
Spider-Man、3D
2026 · 3D · Blender & three.js

Spider-Man、3D

夕暮れのニューヨーク上空に浮かぶ、Blenderでコードから造形した胸像。長押しでウェブを発射。

Iron Man

3つのバージョン
CSS Iron Man
2012 · CSS3オリジナル · 制作期間1日

CSS Iron Man

HTML & CSSで描いたスーパーヒーローのシリーズから。
Iron Man、レンダリング版
2026 · レンダリング · HTML & CSS

Iron Man、レンダリング版

純粋なHTML & CSSで描いた、磨き上げられた赤と金のアーマー。アークリアクターが起動します。
Iron Man、3D
2026 · 3D · Blender & three.js

Iron Man、3D

Blenderでコードから造形したハードサーフェスのアーマー。長押しでユニビームをチャージ。

Hulk

3つのバージョン
CSS Hulk
2012 · CSS3オリジナル · 制作期間1日

CSS Hulk

HTML & CSSで描いたスーパーヒーローのシリーズから。
Hulk、レンダリング版
2026 · レンダリング · HTML & CSS

Hulk、レンダリング版

純粋なHTML & CSSで描いた圧倒的なポートレート。2012年のHulkをリメイク。
Hulk、3D
2026 · 3D · Blender & three.js

Hulk、3D

Blenderでコードから造形した巨大な胸像。長押しで怒らせてみてください。

R2-D2

3つのバージョン
CSS R2-D2
2012 · CSS3オリジナル · 制作期間4日

CSS R2-D2

HTML & CSSで描いたロボットのイラスト。
R2-D2、レンダリング版
2026 · レンダリング · HTML & CSS

R2-D2、レンダリング版

夕暮れのタトゥイーンに立つ、純粋なHTML & CSSのR2-D2。長押しでビープ音。
R2-D2、3D
2026 · 3D · Blender & three.js

R2-D2、3D

Blenderでコードから作った、タトゥイーンに立つハードサーフェス3DのR2-D2。長押しでビープ音を鳴らし、ホログラムを投影します。

Game & Watch

3つのバージョン
CSS Game & Watch
2012 · CSS3オリジナル · 制作期間1週間

CSS Game & Watch

往年の携帯ゲーム機のレスポンシブなイラスト。
Game & Watch、レンダリング版
2026 · レンダリング · HTML & CSS

Game & Watch、レンダリング版

3つのレスポンシブなデバイスで遊べるひとつの液晶ゲーム：Game & Watch、Game Boy、Mini Classic。
Game & Watch、3D
2026 · 3D · Blender & three.js

Game & Watch、3D

遊べる液晶画面を備えた、Blenderでモデリングした携帯ゲーム機。ボタンを押すか、矢印キーで操作できます。