• Twitter
  • Facebook
  • Google+
  • RSS

画像は一切使ってない!?CSS3だけで描いた“ドラえもん”がすごい



CSS3 ドラえもん

インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。


こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションまできちんと表示されます。


一方Internet Explorer8はCSS3に対応していないため、カクカクしたドラえもんに。

作者のブログによれば、CSS3で色々なことをやってみるうちに「画像を使わなくても絵が描けるのでは?」と思い立ち、誰もが知っているドラえもんにチャレンジしてみたとのこと。CSSのコードだけで600行を超える大作になったそうですが、「今回の企画でCSS3の新たな可能性をみなさんに知っていただけたのなら幸いです。」という言葉通り、これまでの常識を覆す新たな可能性を感じさせられますね。
画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD

はてなブックマークのコメント欄でも、「これはおそろしい」「imgじゃない・・・だと・・・」「CSSだけでドラえもんを描くなんてスゴイ!」といった驚きの声が続出していました。

文: 飯塚朋子

関連エントリー