最近発見したスマホを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
フラットで再現されると新鮮ですね。
iPad mini
横表示もOKです。
Nexus 5
Nexus 5もいいかんじ
どの端末をすごく特徴を捉えていてNexus 5やGalaxy 5の曲がり具合もいい感じですし、HTC Oneのスピーカーをradial-gradientで再現していてこんな使い方もあるんだと勉強になりました。アプリ紹介系のLPなんかでざっくりとみせるにはかなり参考になるCSSでした。
URL
Share
Tweet
Pocket
はてブ!