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

公開日 :

カテゴリー :

最近発見したスマホをCSSで再現したのが個人的にすごかったので紹介します。8 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機種です。

8 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

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>