夏を迎えてから一気に黒くこげました。
久しぶりのブログの藤田です。
スプーくんと言えばスプーキーズのマスコット(イメージ?)キャラクターなのですが下のスプーくんの画像の中に一つ仲間はずれがいます。わかりますかね??(PCで見てね)
正解は。。。
最後のスプー君だけは画像ではなくCSS3のみでできています。
いけてないブラウザを使っていなければマウスを重ねてアニメーションもします(もちろんno Javascript)。
なんとこのスプーくんソースは画像よりも容量を食う結果に(主にCSS-Animation)。ただリキッドデザインにはこだわりたかったので外側のdivのサイズを変えるとちゃんとリサイズされてキレイに表示されます。
最近の仕事でhtml5対応のソースを書くことが少し増えてきましたが、普及はまだ先のようですね。
クロスブラウザ(特にIE6)を考えると頭が痛くなりそうです。
今回のCSS3ネタも旬ではないほどにWEBの技術の進歩は早くて、追いかけるのは楽しいです。
しばらく自分でサービスを作ってないので落ち着けたら何かリリースしたいですが、時間はなかなか待ってはくれませんね。
最後にCSSスプーくんをIE6で表示した画像を貼って今回は失礼したいと思います。 意外にカワイイと思いませんか?笑
追記:このブログのDOCTYPE宣言はhtml5ではないのですがPCブラウザではちゃんと表示できるようで安心しました(・∀・)