CSSでここまで実現!

SPONSORED LINK

Pocket

先日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

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

ツイッターもやっています!

SPONSORED LINK

  1. こいつもかなりイッちゃってます。
    http://osx.portraitofakite.com/

    注)Flashじゃないよ。

  2. うお、FLASHけどFLASHじゃない・・・すご。

  3. CSS+HTML+Javascript で WinXP を忠実に再現

    CSS+HTML+Javascript で WinXP を忠実に再現 (from: everything is gone) (※ IE だと崩れます。出来れば…

  4. ここまでできるぞ!ホームページインタフェース

    ▼ホームページ制作

    ホームページを制作する際、主に下記の技術?を使用しますよね…

  5. CSSでここまでできる!

     思い通りのレイアウトをするには、テーブルを使わないと、と云われることがあります…

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

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

  7. Mozilla Firefox1.0.3に最高レベルの脆弱性

    ◆Mozilla Firefox1.0.3に最高レベルの脆弱性 Javascripをonにして、Firefoxで見てもらいたいCSSでここまで実現!のサイトはど…

  8. CSSはすごいや…

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

  9. 物凄いCSS

    i d e a * i d e a – CSSでここまで実現! さんで面白いも…

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

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

  11. ここまでできる

    とにかく見てくださいよ先生。 Windows XP(Firefox推奨) Ma…

  12. CSS

    寝ればいいのにうろうろしてたら、こんなブログを見つけました。
    これはすごい!![:てれちゃう:]
    IEだと崩れちゃうのが、かなり、そうとうもったいないけど、…

  13. 発想を豊かにするもの (TableTopics.com)

    発想を豊かにするもの May 08, 2005 「素敵な会話は素敵な質問から始…

  1. No trackbacks yet.