Pure CSSで作成された8種類のデバイスモックアップ「8 Pure CSS Mobile Devices」

Tips

Pure CSSで作成された8種類のデバイスモックアップ「8 Pure CSS Mobile Devices」

見た目も綺麗で、個人的に覚えておきたいと思ったので備忘録兼ねて紹介。
iPhone・iPad Mini・Nexusなどの全8種類のデバイスをCSSのみで作成したフラットデザインのモックアップで、PortraitとLandscapeそれぞれの見栄えやカラーバリエーションも用意されています。

全8種類のデバイスモックアップ

「8 Pure CSS Mobile Devices」はフラットデザインのデバイスモックアップをCSSのみを使用して作成されたもので、デバイスは全8種類あり、Nexus 5とHTC One以外はそれぞれのカラーバリエーションも用意されています。
カラーバリエーションがあるものはそれぞれのデバイス下にカラーバレットが用意されているので、それらをクリックすることでカラーを変えることができます。

  • iPhone 5S(Color:Black・White・Gold)
  • iPhone 5C(Color:White・Red・Yellow・Green・Blue)
  • iPad Mini(Color:Black・White)
  • iPhone 4S(Color:Black・White)
  • Nexus 5
  • Lumia 920(Color:Black・White・Yellow・Red・Blue)
  • Galaxy S5(Color:White・Black)
  • HTC One
Portrait時とLandscape時それぞれの見栄えも用意されている

また、デフォルトではPortraitで表示されていますがそれぞれLandscape時の見栄えも用意されており、各デバイス下の「LANDSCAPE」をクリックすればLandscape時の見栄えに変わります。

少し前からこういったものは沢山出てきているし少し探せば同じようなものが幾つか見つかる気もしますが、ここまでまとめてあるものは個人的に見た記憶がなかったので備忘録兼ねて紹介しました。
実際の表示や詳細については以下のDEMOまたはGitHubで確認できます。

※DEMOにあるカラーや傾きが変化する動きの部分に関してはJSを用いて実装しています。

Close the search window,
please press close button or esc key.