2010でしょうか?アイデアが素晴らしいです。今回は同じく、画像は使わずにcssだけでドラえもんを描きましたが「html要素はdivを1つだけ」という縛りにしてみました。疑似要素を、もちろん使います。詳しくはDEMOのソースやfireBugなどを見て頂くとして、大まかにパーツを分けると以下のようになっています。box-shadow影は頭部と相似形の円になります。box-shadowは複数作成でき、位置、大きさ、色を変えられます。横棒の文字を出して、ひげにしています。した上でborder-radiusの値を工夫して半円形を作ります。それ自体の背景を赤にして、舌のピンクはbox-shadowのinsetで、ポケットをbox-shadowで作成します。縦棒の文字を出して、鼻の下の線にしています。長さが足りない分はtext-shadowで文字を複製する感じです。した上でborder-radiusで円形を作ります。それ自体の背景は白にして、以下をbox-shadowで作ります。insetでつくり、ハイライトになる広い部分を残しますアイライン、白目、黒目、目のハイライトはbox-shadowの色と位置を変えて重ねます。作成ツールはFireBugの「ソース編集」fireBugでcssタブを表示すると、左上に「ソース編集」か「ライブ編集」があります。プルダウンで選択可能なので、ソース編集にして、そこをクリックします。ソース編集の表示は、cssのプロパティや構文などが色分けされませんが、変更したら即時に描画に反映されるのは、いつものFireBugと同じです。これである程度変更を加えたら、その内部を全選択してコピーし、エディタのcssのソースにペーストします。この方法だと、複数箇所にわたる変更をまとめてコピペできるので楽ちんです。対応ブラウザは:before、:after、border-radius、box-shadow、text-shadowをサポートしているブラウザです。ドラちゃんの顔にホバーすると、cssが殆ど解除されるtrantisionを付けておきましたので、transitionに対応しているブラウザならば、その変化を見て頂けます。