以前このサイトでも画像を一切使わない「絵」をCSSで表現したサイト「
CSSの家」を紹介しましたが、CSSもあれから進化してアニメーションもできるようになってしまい、本当に進化し続ける技術なんだなと改めて痛感している今日この頃です。
というわけで今回は
ドラちゃんを描いた職人さんの紹介。
★画像を一切使わずにCSS3だけでドラえもんを描いてみた!
左がFirefox 3.5.8(Mac)と右がSafari 4、Google Chrome 5(Mac)での表示。Safari系が一番完成度が高く、シャドウや曲線の他に、目の部分がアニメーションします。
他のMacのブラウザでも試してみると、それはそれで味があって面白いです。→
左からNetscape 9、Opera 9、IE5.2。もうサポートが終わっているブラウザも入ってますが、並べてみるとCSSのどのセレクタが効いていて、どこが未対応かもわかって興味深いです。