CSSでここまで実現!

先日Six Apart社の上ノ郷谷氏と呑みにいった。彼はHinagataというMovableTypeのテンプレートサイトをつくっているのでCSSにとても詳しい。ふたりでCSSはすごい!と盛り上がったのだが(その後上ノ郷谷氏は2杯目で撃沈)、CSS関連で話題になっているサイトがあったのでこちらでご紹介。

これはCSS+HTML+JavascriptだけでつくったWindowsXPの画面である。IEではうまく見れなくて、Firefoxで見てもらいたいのだが、CSSでここまでできるのだなぁ、と感動すること請け合いだ。

windowsxp.jpg

↑ WindowsXPそっくり・・・すご。実物はこちら

ちなみにアイコンとかをダブルクリックしても何もならないのだが、(1) アイコンをドラッグできる、(2) スタートメニューが開く、という機能は実装しているようだ。ウェブの表現力もここまで来たか、と思えるので是非試してもらいたい。

ちなみにブラウザ上でOSを表現、というサイトは他にもあって、個人的に昔感動したのがブラウザからMacOSをインストールする次のサイト。最初ちょっと怖い画面が出てくるがあまり気にせずにじっと待っていると昔なつかしのMacOS(Ver.8)の画面が出てくる。こちらはアイコンなどをクリックしても楽しいのでいじり倒してみるといいだろう。

macos.jpg

↑ こちらはむしろIEで。DHTMLですね。実物はこちらクリックすると怖い画面が出てきますので注意。でも大丈夫ですから。

またもうちょっとシンプルなところでは1bit Mac :-)というサイトもありますね。これはFlashを使ったものですが。こちらもご参考までに。

1bitmac.jpg

だからなんだと言われればそれまでですが、クリエイティブな人がいるものだな、と。

Pocket

SPONSORED LINK

0 Comments

  1. CSSでここまで実現!(i d e a i d e a)

    本当にすごい再現度に驚き。
    HPクリエイターとしては、ここまで出来たらすご腕なんだろうなぁ。
    CSSには悩まされるばかりだけど、逆に利用すればここまで出来る…

  2. CSSはすごいや…

    すごいです…WindowsXPのデスクトップがHTML + CSS + Javascriptでほぼ忠実に再現されています。思わず「これってキャプチャじゃない?」…

  3. 久々に味わう祭り気分(笑)

     超まったり&超マイペースにブログを更新しているので、一時期に比べてアクセス数もこなれた感じになってた今日この頃でしたが、ここ数日間は久しぶりに「ドカーン!」と…

Leave a Reply

Your email address will not be published. Required fields are marked *