CSS3でドラえもん

以前このサイトでも画像を一切使わない「絵」をCSSで表現したサイト「CSSの家」を紹介しましたが、CSSもあれから進化してアニメーションもできるようになってしまい、本当に進化し続ける技術なんだなと改めて痛感している今日この頃です。

というわけで今回はドラちゃんを描いた職人さんの紹介。
★画像を一切使わずにCSS3だけでドラえもんを描いてみた!

左がFirefox 3.5.8(Mac)と右がSafari 4、Google Chrome 5(Mac)での表示。Safari系が一番完成度が高く、シャドウや曲線の他に、目の部分がアニメーションします。
他のMacのブラウザでも試してみると、それはそれで味があって面白いです。→左からNetscape 9、Opera 9、IE5.2。もうサポートが終わっているブラウザも入ってますが、並べてみるとCSSのどのセレクタが効いていて、どこが未対応かもわかって興味深いです。

comments

コメント、ありがとうございます。
CSS3でパンダもいいですね!URLありがとうございます。
CSS3から本当に表現の幅がさらに広がり、画像を使わなくても凝ったデザインにすることができるのは素晴らしいですよね。
他にも曲線と直線の組み合わせのシンプルなアイコンやピクトグラムみたいなのを原画に、CSSで表現すると面白いかもしれませんね。

私もそのうち何かイラスト系に挑戦してみようと思います。

  • ky@cmd+F
  • 2010/05/24 3:40 PM

CSSって色んな事ができるんですね。
私は文字の色を変えるぐらいしか分からないんで、ドラえもんを見て驚きました。
同じような事をしてる人がいないか探してみたらパンダを描いてる人がいました。IE6で見たら変なパンダになって面白かったです。
職人ってすごいですね^^

画像を使わずにCSS3でパンダを描いてみた感想
http://gontyping.blog58.fc2.com/blog-entry-183.html

  • 夏でもこたつ
  • 2010/05/19 1:47 PM
   

trackback

pagetop