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

ネコニウム研究所

PCを利用したモノづくりブログ

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

2021-11-9 |

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

はじめて CodePen 使ってみた。

手順書

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

解説

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

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

まとめ

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

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

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

カテゴリー「プログラミング覚書」の最近の記事
タグ「CSS」を含む最近の記事