こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。
▽CSS3 ドラえもん
インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。
こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションまできちんと表示されます。
一方Internet Explorer8はCSS3に対応していないため、カクカクしたドラえもんに。
作者のブログによれば、CSS3で色々なことをやってみるうちに「画像を使わなくても絵が描けるのでは？」と思い立ち、誰もが知っているドラえもんにチャレンジしてみたとのこと。CSSのコードだけで600行を超える大作になったそうですが、「今回の企画でCSS3の新たな可能性をみなさんに知っていただけたのなら幸いです。」という言葉通り、これまでの常識を覆す新たな可能性を感じさせられますね。
▽画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - ShopDD
はてなブックマークのコメント欄でも、「これはおそろしい」「imgじゃない・・・だと・・・」「CSSだけでドラえもんを描くなんてスゴイ！」といった驚きの声が続出していました。
