スマホをCSS+フラットデザインで再現した11 Pure CSS Flat Mobile Devices

公開日 :

最終更新日 :

カテゴリー :
8 Pure CSS Mobile Devices

最近発見したスマホをCSSで再現したのが個人的にすごかったので紹介します。11 Pure CSS Flat Mobile Devicesは、Marvel PrototypingというところがGithubで公開していて、ここ最近に出ているスマホをCSSのみでしかもフラットデザインで再現されています。再現されている端末は、iPhone 5S, iPhone 5C, iPhone 4S, iPad Mini, Nexus 5, Lumia 920, Galaxy 5, HTC Oneの8機種です。

11 Pure CSS Flat Mobile Devicesで出ているスマホは、縦持ちだけではなく横持ちの表示もできるよう、横持ちにするときもJS(JQuery)でクラスを切り替えていました。

iPhone 5S

iPhone 5S

フラットで再現されると新鮮ですね。

iPad mini

iPad Mini

横表示もOKです。

Nexus 5

Nexus 5

Nexus 5もいいかんじ

どの端末をすごく特徴を捉えていてNexus 5やGalaxy 5の曲がり具合もいい感じですし、HTC Oneのスピーカーをradial-gradientで再現していてこんな使い方もあるんだと勉強になりました。アプリ紹介系のLPなんかでざっくりとみせるにはかなり参考になるCSSでした。

URL

+1 Pocket はてブ!

公開日 :

最終更新日 :

ライター : Kensho Tasaki
カテゴリー :

タグ : Android iPhone デザイン

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

© 2012 - 2018 SAMURAI PROJECT Proudly powered by WordPress