確定申告も終えたので、久しぶりにコンテンツを追加しよう。
作成ポイントは以下の通り
- キャンドルを描くのに使ったhtml要素はdivが2つだけ
- 炎がチロチロと動くのはcssのanimation
- 画像の使用は無し。Firefox、Safari、Chromeに対応。IEは無視。
実は、ろうそく、ろうそくの芯、炎を描くだけならdivは1つで済む。afterとbeforeの疑似要素を使えば良いからだ。しかし、このエントリーを描いている時点のwebkitでは、疑似要素がanimationしないので、仕方なくdivを2つにした。
このブログで公開している作品の制作目的は、8割が自分の練習の為で、直接に現場で流用できるかどうかは考慮していない。とはいえ、ここで試したことを、自分の仕事に利用することは多い。純粋に「CSSで絵を描く」ならdivを100個でも200個でも使うのも有りだが、実用に当たっては、その絵を描く為に追加する要素が少ない方が良い。
何故なら、CSSで描画するために要素があるのではなく、マークアップした要素を装飾するためにCSSがあるからだ。当たり前の事ですが。
少ない要素で複雑な絵を描く時に、疑似要素はとても便利。元になる要素1つにつき、afterとbeforeで2つ配置できる。
要素や疑似要素の「塗り」をリッチにしたい時にはbackground-imageのgradientと、box-shadowをinsetで使うのが有効。background-imageも、box-shadowも、複数の値で重ね描きできるので、大変に重宝する。今回のキャンドルの様に、光と影と陰を表現するのにはうってつけだ。
どのようにbackground-imageや、box-shadowを使っているのか、詳しくは作品のソースを見たり、FireBugなどを利用して確認して下さい。
transformのskewの記述をskewXとskewYに変更（2012.7.27）