画像を一切使わずにCSS3だけでドラえもんを描画したよ！　ブラウザ毎に見え方が全く違って面白い

昨日紹介したCSS3だけで制作されたウェブサイト『NetaGear』に続き面白いサイトを紹介。今度はCSS3のみを使ってドラえもんを描画したという物だ。もちろん今回も前回同様にブラウザ毎に見え方が全く異なってくる。正常に描画されているのは、『Google Chorome』と『Firefox』『Opera』だ。『Internet Explorer』のみは丸みのないカクカクなドラえもんになってしまう。

さて、このドラえもんを画像として表示した場合はどのくらいの容量になるのだろうか？
サイトに検証した結果かが掲載されている。結果は以下の通りだ。
GIF …… 33.5KB
JPEG …… 96.5 KB
PNG …… 60.2KB

以上のように画像系はどれも数十KBは行ってしまうみたいだ。ではHTMLとCSS3のみで構成した容量となると……

html 2.05KB
CSS 14.2KB
計　16.25KB

16.25KBと最も少ない数字となった。もちろんバイナリーデータではないので当然といえば当然。ただ、CSS3でドラえもんを描画する手間などを考えると画像で作ってしまったほうが楽なのか？　それとブラウザによってかなり見栄えがことなるのも気になるところだ。ここまで見栄えが異なると『Internet Explorer』でウェブを閲覧することに不安すら感じてしまう。まだCSS3やHTML5が普及していないから良い物の、完全に普及しきった頃には『Internet Explorer』は対応してくれるのだろうか？

ちなみに『Google Chorome』でみるとドラえもんの目が動くよ。

画像を一切使わずにCSS3だけでドラえもんを描いてみた！

■最近の注目記事
ゴールデンウィークは恋人とどう過ごす？　「彼女なんて居ない」が独走1位！
アップル社製品が通販で軒並み終了した理由を聞くも両者食い違い　アップル「販売終了を決めたのはヨドバシでは？」
早速『けいおん!!』第二期の実写版MADが公開される！　再現度高し！
ポーランドにあるセクシーすぎる床屋さんが凄い！　下着姿でチョキチョキしてくれるよ
ASIMOもビックリの二足歩行ロボットが上海万博に出展される！　第二の先行者か？