【海外記事紹介】画像ゼロ、CSSだけで実現した45個もの錯視コレクションが話題に

1月23日、Alvaro Montoro氏が「CSS Optical Illusions」と題した記事を公開した。この記事では、CSSを用いて実装された様々な錯視（光学錯覚）について詳しく紹介されている。

以下に、その内容をいくつかピックアップして紹介する。

このコレクションの中で最も観る者を困惑させるのは、色の恒常性を利用した錯視だ。

Adelson's Illusion（チェッカーボードの影）
影の中に置かれたタイル「B」と、明るい場所にあるタイル「A」。直感的には全く異なる明るさに見えるが、これらは全く同じグレー（#7b7b7b）で描かれている。マウスを重ねて周辺の要素を隠した瞬間、両者が完全に同一の色として融合する体験は、Webならではの「答え合わせ」である。

Color Spheres（色の球体）
赤・青・緑の球体が並んでいるように見えるが、実際には全て同じ「くすんだ灰色」である。球体の上に重なる細い線の色が、脳に「色づけ」を強制しているのだ。これもホバー操作により、線が消えることでその正体が明らかになる。

JavaScriptによる制御を一切介さず、CSSの描画パターンだけで静止画に動的な錯覚を与えるデモも圧巻である。

Rotating Snakes（蛇の回転）
円盤のパターンを周辺視野で捉えると、まるで歯車が回っているかのように回転し始める。CSSで描かれた特定の色配置が、視覚処理における運動検出機能を誤作動させている結果である。

Expanding Hole（拡大する穴）
中心の黒い霧を見つめていると、穴がじわじわと広がり、自分を飲み込んでいくような感覚に陥る。完全な静止画でありながら、視覚が「奥行き」と「拡大」を誤認し続ける。

技術的観点から興味深いのは、これらの錯覚を成立させるための実装手法である。

Waves（波）
波打つような動きを感じさせるこのデモは、背景で膨大な数の conic-gradient（円錐グラデーション）を重畳させている。ブラウザのレンダリング負荷が極めて高く、作者自身も「もっと効率的な方法があるはずだ」と認めるほどの、まさに「力技」による実装だ。

Müller-Lyer Illusion（矢印の長さ）
線の端にある矢印の向きで長さが違って見える古典的な錯視だが、Montoro氏はこれを疑似要素（::before, ::after）とグラデーションの再配置のみで完璧に制御している。

本コレクションは、単なる視覚的な娯楽に留まらない。画像リソースに頼らず、CSSのプロパティを極限まで使い倒すことで、Web技術がいかに人間の認知に干渉しうるかを示す、極めて興味深い技術実証である。

詳細はCSS Optical Illusionsを参照していただきたい。