CSS だけで実装する宇宙空間

KeithClark というサイトの 404 ページに遭遇したのだが、その実装が面白かった。

• http://www.keithclark.co.uk/404

星々が飛び交う宇宙空間に「404 Where has that gone?」の文字が浮かび上がる。

実装を見てみるとさらに興味深かったので、ちょっと修正して作ってみた。

• デモ：404 Where has that gone?
• コード：frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

飛び交う星 (宇宙のチリ？) はドットがちりばめられた透過画像で、DataURL 形式の画像として用意している。コレを head 要素、body 要素、さらに head 要素内の style 要素の ::before・::after 要素に適用している。head 要素や style 要素にスタイルを当てるのは少々意外な実装方法だろう。

コレで合計6つの要素にドットの背景画像が適用できた。後はコレを各要素ごとにタイミングをズラしてアニメーションさせており、回転と拡大をかけている。この動きは開発ツールで要素を選択した状態でアニメーションを見てみると分かりやすいだろう。

デモページでは style 要素の代わりに div 要素を配置しているが、実際は body 要素内に一切の要素がない。コレも驚きだ。

テキストについては、黒い背景色を提供している html 要素の :before 擬似要素にて表示している。コチラは近くまで寄ってきたらその場で止まる、1回限りのアニメーションである。

head 要素や title 要素も CSS でスタイリングして表示させようと思えばできるのは知っていたが、ココまでトリッキーな実装は見たことがなかった。body 要素内に一切コンテンツがなく、画像も DataURL で埋め込んでいるので 404 ページ単体でしっかり動作する (404 ページは独立して動作するようにしておくため、外部スタイル等は使わずインラインで記述しておくことが望ましい)。なかなか面白く、かつ有用な 404 ページの実装を見られた。