2012 02 03 1538

HTMLで作られたiPhone 4 | ブログヘラルドという記事で、HTML、正確にはCSS3で作られたiPhone 4が紹介されていました。

信じられないかもしれないが、ウェブで閲覧可能なこの絵にかいたようなiPhone 4はイメージなしで再現されている。HTMLのみ、正確に言うとCSS 3.0で作成されている。

画像などを使わずに、CSS3だけで実現しているのだそうです。って、こんなに精密に描き出すことができるのですね。

2012 02 03 1538 1

いちおう、電源ボタンやホームボタンなどもクリックできるようになっています(電源のオン/オフのみ可能です)。

iPhone 4のガワだけでもないですし、アイコンだけでもないですし、全て、ですよ。全てがCSS3で作られているのだそうです。

使用しているのは、

・3,395行のCSS
・335行のJavaScript(jQuery)

とのことです。

Mac OS XのSafariもしくはGoogle Chromeが閲覧するのにはベストのようです。