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

CSS3 ドラえもん CSS3 ドラえもん

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

[f:id:sallymylove:20100506122243p:image:w200]

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

[f:id:sallymylove:20100506122244p:image:w200]

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

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

画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD  画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD

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

「CSS3」に関連する商品 by BECOME