2012年1月4日水曜日

FlashでもGIFアニメでもHTML5でもない、CSSで描かれたものまとめ

こんにちは、ひつぶです。
書こうと思ってたネタをPineに書かれてしまっていたので、CSSで描かれた絵のまとめ的なのをしてみようかと思います。


興味がある方は続きをどうぞー。

※スクリーンショットはすべてGoogle Chrome16によるものです。

iPhone 4

推奨環境:Mac OS XのGoogle ChromeかSafari
CSSコード行数:3395行

すごいですねー・・・。Pineが紹介済みなので特に書くことはないです。
これ地味に現在時刻表示してくれてます。
スライドのロック解除もちゃんと文字が薄くなったりと細部までこだわってますね・・。

iPhoneの時計

推奨環境:Google Chrome
CSSコード行数:不明

こっちは現在時刻ではないものの、時計の針がしっかり動いてます。

ドラえもん

推奨環境:ChromeかFirefoxがお勧めOperaは一部崩れる
CSSコード行数:およそ700行

これはかなり有名でしょうか。
GoogleChromeでのみ、目が動きます。

とあるぐぬぬの禁書目録(インデックス)


推奨環境:Google ChromeかSafari(それ以外はかなり崩れる)
CSSコード行数:3500行超え

※注意:とても重いです。CPU使用率が急激に上昇する恐れがあります。
これはすごいです。
スクリーンショットでは分かりませんが、目が絶えずうるうるしていて、
マウスをのせると髪がなびきます。

秋山 澪
Rei

推奨環境:Google ChromかFirefox、Opera、Safari (Chromeが一番綺麗に見えます)
CSSコード行数:不明

これもすごいですね。こっちも目がうるうるして髪もなびきます。

-----------

この記事で紹介するのは以上です。
もっと探してみるのも面白いかもしれないですね。

また、誰でも簡単に画像をCSSに変換してくれる「Img to Css」もあるようで。

Flash離れが進みつつある今、HTML5に並ぶ選択肢ができるかも?w

1 コメント:

Hitsumabushi さんのコメント...

リンクが一部いかれていたので修正しました。

コメントを投稿

Related Posts Plugin for WordPress, Blogger...

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Walgreens Printable Coupons