UNORTHODOX WORKBOOK

BLOG TOPStudy[CSS] 1つのdiv要素だけでゲームボーイを再現してみた

[CSS] 1つのdiv要素だけでゲームボーイを再現してみた

catch-css-one-div-gameboy

暇だったので、CSSグラデーションの勉強がてら、1つのdiv要素にCSSだけでゲームボーイ本体を再現してみました。画像を使わずにほぼCSSだけでやっています(テキストの部分だけ画像を使用しました)。

CSSでゲームボーイを再現

ここに表示させることはできないので、以下のリンク先ページにコードごと掲載しています。

ゲームボーイ

CSSは、あまりにも長すぎるため、よく確認できず、変なところがあるかもしれません。また、あまりにも長くなりすぎてしまうため、ベンダープレフィックスは割愛しています。

ブラウザは、Chrome、Safari、Firefoxのそれぞれ最新版とIE11で問題なく表示されていることを確認しています。ただ、環境によってはきれいに表示されないかもしれません。特にwindowsの場合。

CSSグラデーションを利用

主にCSSのグラデーションを使って表現しています。CSSのグラデーションは、ブラウザによってはあまりきれいに表示されなかったりして、ちょっとまだ不安定な感じで残念なんですけど、使い方次第で様々な表現ができるので、ぜひ扱い方を覚えておきたいと思っていました。

当然、使ったことはあったんですけど、不安というか、苦手意識があったんですよね。

見ての通り、普通のグラデーションの使い方をしていないので、勉強になったのかどうかあれですけど、とにかくいっぱい書いたので、仕組みや書き方等は理解できたと思います、多分。

ブラウザの対応の問題もありますが、モダンブラウザではほぼ問題ないので、これから積極的に使っていきたいですね。

疑似要素も使用

全てまとめて記載してしまうこともできたんですが、少しだけ楽をする為に、before疑似要素も使っています。スクリーンの部分がそうです。

おわり

細かいところを再現できなかったり、ボタンの影とか難しすぎて断念したりで、ややリアリティにかけますが、初めてなのでということで。。。

なんでゲームボーイにしたのか自分でもよく分からないんですけど、たまたま目について簡単そうだったので。ゲームボーイに思い入れはないものの、初代ゲームボーイを買ってもらった少年時代を思い出し、少し感慨に浸っています。

ABOUT

it's me

長野県北部を拠点にフリーランスとして活動しています。
Webサイトの制作をメインに、グラフィックデザインなどの制作を承っています。Twittermore

PAGE TOP