トロをCSS3だけでつくってみる

CSSでドラえもんとかTwitterのクジラとか、みなさんなかなかすごいですよね。

CSS3もだいぶIEさん以外は対応してきたので盛り上がっております。

なので俺もなんか作ってみよう!
CSS3だけで画像を使わずになんか描いてみよう!

お、横にどこでもいっしょのトロのぬいぐるみが落ちているじゃないか!!
よしよし、おまえをモデルにして欲しいんだな?

そのとき「つくってほしいのニャ」とトロの声が響いたとか響かなかったとか。
響きませんけどね。
オーケー、わかった!トロを作ろう!!!

CSSでできたトロ

なわけで出来たのがこちらです。

CSS3だけでトロのデモページはこちらからどうぞ。
上の画像クリックでも同じページに飛びますよ。

とりあえず確認はWinXPのFirefox3.6とChrome5でしかしていない状態。
なので他のブラウザじゃきちんと見れないと断言します。
苦労したのは耳の部分。
それ以外はそんなに困ることもなくパパッといったのですけども。

しかし、ブログを書くに当たってトロの画像をちゃんと探してみたんだけど、なんかちがうね・・・。
トロともりもり
まあ、俺のもかわいいはずだから良しとしますが。

今後の課題としては

  • もっといろんな環境で出来るだけきちんと表示
  • FirefoxとChromeでも既に多少違うからその吸収
  • 耳とか耳の中とかの三角的な部分をなんとかスマートに
  • アニメもさせたい

ってところ。
DOCTYPE htmlで書くこともないしな。

誰かうまいことCSSで三角を表示させる方法知りませんか?
思いつきませんでした。
borderにtransparentつかうとかはググッたらあったけど、今回は縁取りとかしたいから無理だったし。

しかし、本物はやっぱかわいいですね。
トロのかわいさは等身やポーズが赤ん坊に似ているからだな、とか弟の息子の見ながら納得したりと。
CSSの勉強以外に気付かされることがあったりもしたり。

あ、でも
「おまえウェブの仕事してるのにソース汚いな」
とかは言わないで。
もう先に予防線張っておきますよ。

そしてCSSドラえもんの方が「余程の暇人でない限りCSS3で絵を描くのは人には薦めません」といっていますが、概ね同意見。
ましてや空のDIVだらけではHTMLとしての意味がないというのも問題。
実用的ではないのです。
それならSVGやHTML5のCanvasなんかを使う、覚えるほうが実用的。

CSSで絵を描くように使う場面というのは、テキストを吹き出しのように囲んで見せるとかちょっとしたロゴマークのようなものにいれるとか、そういった程度の使い方にするべきかなと。
それだって空DIV並べたよくないので、やっぱ画像でいいんじゃないかなと。

なんにしても、いろんなことをもっと精進しなきゃ。

ポケピたち