CSS3のグラデーションを使って雀を描く
CSS3 のグラデーションを使ってすずめを描いてみました。Firefox などレンダリングエンジンに Gecko を採用しているブラウザのみ対応。
Webkit に対応していない理由はグラデーションの指定方法が違うため、表現できない部分があるからです。先行実装のため Webkit を使用している Safari と Google Chrome でも実装が異なります。
以下に指定方法の違いを簡単にまとめておきます。
線形グラデーション
-webkit-gradient( linear, <point1>, <point2>, <stops>...)
-moz-linear-gradient( <point> <angle>, <stops>...)
Webkit では開始点と終了点を指定します。left, top, right, bottom, center を組み合わせた値が使えるほか、%値、単位なしのピクセル値も使用できます。
一方 Gecko では開始点と角度を指定します。
線形グラデーションに関しては、表現可能な範囲に差はありません。ただし Gecko では終了点を指定できないため、ボックスの大きさを考慮に入れる必要があります。Webkit のほうが指定しやすいといえるでしょう。
円形グラデーション
-webkit-gradient( radial, <position1>, <radius1>, <position2>, <radius2>, <stops>...)
-moz-radial-gradient( <position> <angle>, <shape> <size>, <stops>...)
Webkit では開始点、終了点の位置とその半径を指定します。こちらも left や top などの値、%値、単位なしのピクセル値を使用します。なお、開始・終了点の位置が異なる場合の表示は規定されていないので、同じ値にする必要があります。
Gecko では開始点、形状 (circle または ellipse)、大きさ (ボックスの四辺に依存) を指定します。
Webkit はボックスの形状に依存しない円形グラデーションが可能です。一方 Gecko はボックスの形状に依存するぶん面倒ですが、楕円形のグラデーションが可能です。一長一短ですね。というかこんな使い方ふつうしませんね。
参考
Webkit と Gecko で異なるグラデーションの指定方法ですが、将来的には Gecko の指定方法を採用するようです。Webkit のナイトリービルドではすでに -webkit-linear-gradient と -webkit-radial-gradient が実装されています。これまでの -webkit-gradient も使えるので心配無用。
技術資料はこちら。
