CSSで キャンドルの炎

確定申告も終えたので、久しぶりにコンテンツを追加しよう。

Candle
CSSで描いたキャンドル

作成ポイントは以下の通り

  1. キャンドルを描くのに使ったhtml要素はdivが2つだけ
  2. 炎がチロチロと動くのはcssのanimation
  3. 画像の使用は無し。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)

カテゴリー: css, css3 タグ: , , パーマリンク

シェア

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA