【CSS】レトロゲームっぽいウィンドウを表示する

画像ファイルを使わずに CSS のみで DQ とか FF とかみたいなレトロゲームっぽいウィンドウを表示してみる。

はじめて CodePen 使ってみた。

手順書

See the Pen
RetroGameWindow by 108nen (@108nen)
on CodePen.

解説

box-shadow のぼかしを 0 にして輪郭がシャープに表示されるようにしてるのと box-sizing: border-box; にウィンドウの枠が含まれるように box-shadow に inset を設定してる。ウィンドウの枠が box-sizing: border-box; に含まれることでレイアウトしやすい。

上段は、DQ 風。
下段は、FF 風。
あくまで風。

まとめ

レトロゲームっぽい見た目のサイトを作る時に使えそう。

更にレトロゲームっぽくするには

ウィンドウ内のフォントを 8x8 のビットマップフォントにするとファミコンっぽくなると思われ。